J'ai essayé d'obtenir des informations utilisateur auprès de RandomUser.ME Server et j'ai essayé d'afficher ces données utilisateur à l'intérieur de la page HTML. C'est ce que j'ai essayé de faire pour cela;
randomuser.page.ts randomuser.page.html J'ai succédé à obtenir des données et affichées dans la sortie de la console, mais je ne pouvais pas montrer ceci sur la partie HTML. Comment puis-je résoudre ce problème?
5 Réponses :
Essayez ceci:
randomuser.page.ts ou randomuser.page.html
Si j'utilise randomuser [0] dans la partie HTML, je reçois une erreur suivante
"Impossible de trouver un objet de support différent" [Objet d'objet] "de type" objet ". NGFOR ne prend en charge que la liaison à des ittérious tels que les tableaux."
Pouvez-vous s'il vous plaît partager votre exemple d'objet de réponse.
et si j'ai essayé de le hasard ceci.Randomuser [0] = Res à cela.Randomuser = res; Je ne pouvais pas compiler mon code et obtenir et error, erreur TS2322: type "objet" n'est pas assignable à taper "
C'est ce que je reçois de la sortie de la console: 0: objet {sexe: "mâle", email: "theodore.long@example.com", téléphone: "(824) -658-4841", ...}
Je suppose donc que le problème est avec l'objet de réponse. Si possible, pouvez-vous partager votre règlement d'échantillon de service.
Les données seront dans un objet en réponse afin que vous ayez besoin d'y accéder comme celui-ci.Randomuser [0] = res.Data
Votre problème est que l'angulaire ne met à jour que le DOM lorsque des références changent. Les modifications d'élément de tableau simple ne changent pas de référence. Vous pouvez utiliser ou simplement effectuer des modifications réelles en mettant à jour la référence des tableaux p> après avoir attribué de nouveaux éléments à la matrice p> et ici des notes de côté: vous devriez envelopper votre httpclient dans une apiser qui retourne une observable ou une promesse.
De plus, vous pouvez retourner un nouveau tableau complet dans cet observable contenant les nouveaux éléments. Ce faisant de cette façon, vous pouvez utiliser cet observable directement dans votre HTML P> {{ myObservable | async }}
Ce n'est pas complètement vrai: toutes les opérations asynchrones provenant du cadre et de l'environnement sont enveloppées dans la zone.js. Cela signifie que Angular va automatiquement accrocher de nombreux changements. Les opérations httpclient sont l'une d'entre elles. La seule chose que vous devez prendre en charge est si vous utilisez des méthodes et des objets non zonés. Ensuite, vous devez vous assurer de détecter les changements vous-même en déclenchant un cycle de digère implicitement.
Ce BTW comprend également des opérations créées dans le cycle angulaire avec les objets suivants: promesses, httpclient, événement de Dom et bien d'autres. blog.fram.io/angular/2016/02/01/...
Vous avez défini des données telles que ceci "this.randomuer [0] = res" mais vous l'avez utilisé comme "Laissez RU de RandomUser". Vous devriez modifier votre code en "Ceci.RandomUser = res" dans le composant.
Ceci.RandomUser est utilisé dans une directive NGFour qui présente la matrice.
Aire, mais cela pourrait être une solution, car vous êtes (par code) uniquement l'intention d'utiliser un utilisateur.
@lorenago Oui, il est utilisé dans la directive NGFour, mais le problème est ici "this.randomuer [0] = res" si "res" est un tableau, puis l'attribuer à l'index 0 n'a pas de sens
@meysam, res est un objet.
La réponse de l'API est un objet avec une propriété de résultats qui stocke des données demandées dans le format de matrice.
Donc, vous devez stocker Res.Results pour afficher vos données avec votre HTML de cette manière:
espère que cela aide. this.randomuer = res.results;
Devrait être "résultats" BTW, au pluriel :)
Correct, désolé pour ça.
mise à jour: https://stackblitz.com/edit/angular-bbiy2h
Parce que p> signifie que vous attribuez une propriété avec le nom "0". P> array.Push étend réellement le tableau par un élément. Cela signifie que [0] ne serait pas un accès de propriété, mais un accès index. Mais cela ne se produit que lorsque le tableau contient l'index. P> modifierait le contenu du tableau à l'index [0]. P> maintenant à l'angulaire Détection: Dans le premier exemple, cette détection ne fonctionnerait pas. Vous utilisez * NGFOR qui écoute pour la matrice et les indices concernant. Lors de l'attribution de la propriété [0], il ne détecterait rien, puisque la matrice est liée, mais il n'y a pas de liaison sur la propriété [0]. P> avec le second, cela fonctionnerait, car le tableau ne change pas , mais le contenu de l'un des indices le fait. Donc, les mises à jour angulaires, c'est des liaisons. P> En outre, comme écrit dans le message de Meysam Faghfouri, vous devez examiner un examen détaillé sur la réponse de l'API: il renvoie un objet, contenant une propriété de résultats. Et seulement là, vous avez eu vos utilisateurs. Il est donc nécessaire d'accéder à la liste des utilisateurs avec p> au lieu de juste p> . P> <ion-header>
<ion-toolbar>
<ion-title>randomuser</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<button (click)="get_users()">GET /Users</button>
<ion-list>
<ion-item>
<h2>{{randomUser.gender}}</h2>
<p>{{randomUser.email}}</p>
</ion-item>
</ion-list>
</ion-content>
Je ne sais pas pourquoi mais je ne pouvais pas utiliser la propriété .result. Je veux dire qu'il n'y a pas de propriété .Result lorsqu'il est pressé. :) J'utilise la dernière version d'angulaire et ionique et mybe quelque chose change dans cette version. J'ai déjà essayé tout cela avant et également chercher Google et trouver un exemple différent. Quelqu'un utilise .MAP pour analyser ces données et certaines utilisent votre suggestion, mais je n'ai pas de .map pour httpclient ou .resulte.
Vous voulez dire que votre IDE se plaint? C'est parce que httpclient.get renvoie une réponse de type objet. Celui-ci n'a pas la propriété "résultats". Mais les données à l'intérieur ont, alors donnez-lui un type approprié. J'ai mis à jour le post et ajouté une StackBlitz de travail.
La mise à jour post est terminée maintenant. Désolé, j'ai oublié de le faire avant: D
Pouvez-vous poster une exemple de données de réponse?
C'est une API publique, vous pouvez donc vous essayer :)