Récemment, j'ai commencé à apprendre anguleux mais je suis confronté à une question aujourd'hui. J'ai le composant suivant:
<div *ngIf="data.title">
<h1>{{ data.title }}</h1>
<h5>Author ID: {{ data.authorID }}</h5>
<div>
<span>{{ contentToShow }} </span>
<span>
<a href="#" *ngIf="showReadMore" (click)="readMore()">Read More ↪</a>
</span>
</div>
</div>
4 Réponses :
Permettez-moi d'expliquer. Initialement, vous définissez la valeur de the Pour corriger cette erreur, vous pouvez définir un Définissez vos données et votre contenu initiales: ou autre que vous pouvez définir sur http Les appels sont asyn dans la nature! contenttoshow sur "" qui est une chaîne vierge et une excellente pour angulaire mais dans le ngoninit () appel, vous définir ceci.contenttososhow = this.data.content this._sharedservice.shareddata peut ne pas être défini ni le serveur d'attente pour répondre à laquelle elle pourrait être indéfini également la valeur initiale des données : idata; dans indéfini, donc this.data.content sera indéfini après nonginit ( ) appel. ceci.contenttososhow dans la méthode init uniquement si this.data.content est disponible par code ci-dessous. '' Dans l'appel initial.
Merci beaucoup pour la réponse, mais il semble que le code suivant ne résout pas mon problème ... est-il possible que vous ayez manqué quelque chose?
"Les services sont d'asyn de nature!" - est un peu étrange.
Des appels HTTP plus spécifiques sont la nature ASYNC dans la nature où le service attend d'obtenir des données du backend. J'ai corrigé ma réponse.
Quelle erreur vous obtenez est la même erreur. Essayez de définir les données initialement
Je n'ai aucune erreur. Si j'essaie d'utiliser "Data.Content" dans la vue IT WOKRS, mais si je crée une nouvelle propice -> this.contenttososhow = this.data.content; Et essayez de l'utiliser dans la vue, rien ne montre ...
essayez ceci this.contenttososhow = this._sharedservice.shareddata.content; . Définissez directement la valeur du service et non le ceci.data
C'est le processus, examinez votre code si vous voyez un problème. Ça devrait fonctionner
au point que vous affectez la valeur de À cause de cela, vous voyez une certaine valeur, lorsque vous utilisez pour mieux comprendre ce message est JavaScript une langue de référence pass-référence ou de carte-valeur? peut aider. Deux façons de résoudre votre problème peuvent être: vous pouvez utiliser Le dernier peut regarder quelque chose comme ceci: et dans votre composant vous abonneriez à ce sujet: data.Content à contenttoshow La propriété n'est pas définie, donc contenttoshow semble ne pas être ensemble. Vous devez savoir que JavaScript fonctionne avec «appelé par référence», mais cela ne fonctionne qu'avec des tableaux ou des objets et non avec des primitives (comme chaîne, numéro, etc.). data.Content . Parce que vous accédez à la propriété directement à partir de l'objet et que la valeur modifiée est affichée dans le HTML. data.Content ou vous pouvez notifier votre composant que les valeurs ont changé, par exemple En utilisant un observable.
Merci beaucoup pour l'explication! Mais qu'entendez-vous par «attendre le cadre de la propriété»?
Je pense que cela résout mon problème. Maintenant, je dois lire une documentation pour comprendre exactement comment cela fonctionne. Merci beaucoup :)
Le problème est que votre "contenttoshow" est un type primitif (chaîne) et il est initialisé à Ngoninit (et seulement là). Une fois que vous avez mis à jour SharedData, il est mis à jour correctement, mais la connexion entre le contenttoshow et celle-ci.Data.Content est perdue. En fait, ce n'était pas là.
Cela ne fonctionnera jamais: p> à la place, vous devez conserver la référence à l'objet de votre DataService comme ceci: p> update: strong>
Si vous souhaitez toujours personnaliser votre sortie à l'aide de «contenttoshow», vous devez être informé des modifications. Une façon de le faire est d'avoir un sujet dans votre "DataService" comme celui-ci: p> Une fois que ce sujet est en place, vous pouvez mettre à jour votre méthode "inserdata" avec ceci comme Une dernière ligne: p> à l'intérieur de votre "courantArticLecomonent" (ngoninit), vous devez vous abonner à ces notifications et à la mise à jour "contenttoshow" comme ceci: p> this._sharedService.dataChanged.subscribe(() => {
this.contentToShow = '??? ' + this.sharedService.sharedData.content + ' ???';
})
Merci d'avoir répondu! Alors, comment puis-je faire une "copie" alors? Ce que je dois faire, c'est de faire des manipulations de ce "contenttoshow" et de sauvegarder toujours la valeur d'origine. Comment puis je faire ça? Merci encore!
basé sur ce Réponse Il utilise une solution similaire, mais le problème avec le code de OP est que ceci:
// component
ngOnInit() {
this.data = this._sharedService.sharedData;
}
// template
<div *ngIf="data.title">
<h1>{{ data.title }}</h1>
<h5>Author ID: {{ data.authorID }}</h5>
<div>
<span>{{ data.content }} </span>
<span>
<a href="#" *ngIf="showReadMore" (click)="readMore()">Read More ↪</a>
</span>
</div>
</div>
Dans le nconinit, qu'est-ce que vous obtenez si vous console.log (this._sharedservice.shareddata); ??
Qu'est-ce qui se trouve à l'intérieur de votre "SharedData"?
"SharedData" devrait tenir mes données. Si je console.log (this._sharedservice.sharedddata); Dans Ngoninit, il enregistre un objet avec mes propriétés mais ils sont vides ...
Ce qui est responsable de l'obtention de données, c'est une requête HTTP et quelle est la fonction appelée, si vous allez le modifier, cela vous aiderait, vous devez l'exécuter en premier.
Je viens de l'éditer.
Où appelez-vous inserdata?
J'ai un autre composant qui transmet les données au service partagé. Dans ce composant, j'appelle inserdata, mais cela ne signifie pas problématique ...
À ce jour, on dirait dans votre service SharedService Le SharedData est vide et il sera renseigné une fois que vous avez appelé InsérezData. Juste pour le plaisir, essayez d'initialiser votre SharedData avec quelques données de test. Pouvez-vous les voir sur la page?
J'ai essayé de hardcore quelques données de test dans le composant SharedService -> Pastebin.com/AZ5XVHJR Rien affiché ...