Je suis nouveau sur Angular et j'ai des questions brûlantes. Comme je n'ai pas d'expérience dans cette langue, j'espère que vous comprendrez tous ce que je vous demande.
J'ai parcouru les livres et d'autres sources, mais je n'arrive pas à trouver la bonne réponse
Dans mon user.ts je déclare la classe User
<h2>All Users</h2>
<ul *ngFor="let user of users">
<li>{{user.name}}</li>
<ul *ngFor="let hob of users.hobby">
<li>{{hob.hobbyType}}</li>
</ul>
</ul>
Dans mon hobbies.ts je déclare la classe Hobbies
import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies: <not sure how to get the hobby type listing from Hobbies-list.ts>}
]
J'avais une liste de Hobbies dans hobby-list.ts
export const HOBBIES: Hobby[] = [{id:1, hobbyType:"Snorkeling", hobbyDesc:"Snorkeling is the practice of swimming on or through a body of water while equipped with a diving mask, a shaped breathing tube called a snorkel, and usually swimfins. In cooler waters, a wetsuit may also be worn."},
{id:2, hobbyType:"Diving", hobbyDesc:"Scuba diving is a mode of underwater diving where the diver uses a self-contained underwater breathing apparatus, which is completely independent of surface supply, to breathe underwater."}
]
J'ai répertorié un tableau d'utilisateurs dans un autre ts
export class Hobby {
constructor(public id:number, public hobbyType:string, public hobbyDesc:string) {}
}
Ainsi, les résultats attendus seront l'affichage de la liste des utilisateurs dans User.componment.html et les loisirs de l'utilisateur seront affichés
Par exemple.
Nom: Mandy
Image: mandy.jpg
Hobbies: Plongée sous-marine
Je pense que le code html sera comme ça?
export class User {
constructor(public id:number, public name: string, public image: string, public hobbies: any ) {}
}
Merci pour toute l'aide!
3 Réponses :
le problème est votre importation, vous effectuez une déstructuration ou utilisez export default dans vos modèles par exemple: export default class User {} ,
mais avec seulement l'exportation, vous devez appliquer la déstructuration comme ceci:
import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies: <not sure how to get the hobby type listing from Hobbies-list.ts>}
]
Je ne comprends pas votre commentaire. Voulez-vous dire que je dois changer le code de code Exporter la classe Utilisateur en code exporter la classe par défaut Utilisateur {}?
Non, vous avez deux façons d'impot si vous utilisez l'exportation par défaut, vous pouvez importer directement sans utiliser «{}» ou utiliser uniquement l'exportation dont vous avez besoin d'utiliser «{}» pour importer, vous pouvez en savoir plus sur ce lien "https://www.typescriptlang.org/docs/handbook/modules.html" rel = "nofollow noreferrer"> typescriptlang.org/docs/handbook/modules.html
Oh j'ai revu mon code .. C'est une faute de frappe de mon côté. Mon code est à l'origine: code import {Hobby} de './hobby.ts'; code import {HOBBIES} de './hobby-list.ts'; J'ai oublié le {} lorsque j'ai écrit le code ici. J'ai besoin d'aide pour obtenir hobbyType de la classe {hobby} à afficher sur {User}. Désolé pour la confusion
Je pense que vous vous demandez comment définir la propriété hobbies dans const USERS. Ensuite, vous modifiez d'abord le type de propriété hobbies de la classe utilisateur en tableau de Hobby comme indiqué ci-dessous:
import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies:[HOBBIES[0]] },
{id:2, name:"Mandy1",image:"mandy1.jpg",hobbies:[HOBBIES[0],HOBBIES[0]] }
]
Ensuite, vous pouvez attribuer la propriété hobbies dans const USERS comme suit
export const USERS: User[] = [
{id:1, name:"Mandy",image:"mandy.jpg",hobbies:[this.hobbies[0] ] },
{id:1, name:"Mandy",image:"mandy.jpg",hobbies:[this.hobbies[0],this.hobbies[1] ] }
]
Merci pour l'aide! J'ai réussi à faire apparaître tous les hobbiesType. Mais maintenant, tous les hobbiesType sont affichés sur chaque utilisateur. Mais ce n'est pas le résultat dont j'ai besoin comme je dois le montrer par exemple. ID utilisateur: # 1, HobbyType: Plongée; ID utilisateur: # 2, HobbyType: Swimming; ID utilisateur: # 3, HobbyType: Yoga, Natation et etc. Comment puis-je improviser le code à partir d'ici?
Salut pour ça vous avez réorganisé vos données USER
Salut Debabrata Paul Chowdhury, merci pour la réponse. Voudriez-vous bien me guider là-dessus? Comme je suis encore nouveau dans Aungular. Merci.
J'ai modifié la réponse, veuillez essayer ceci. Si vous avez besoin d'aide, veuillez le dire
Salut. J'ai ajouté des hobbies de code : Hobby [] = HOBBIES; au composant utilisateur Et attribuez le code hobbies: [this.hobbies [0]] à User-list. Mais une erreur s’affiche sous la forme "Impossible de lire la propriété" hobbies "non définie"
Sont à la fois la liste des utilisateurs et les passe-temps: Hobby [] = HOBBIES; sur la même page?
J'ai modifié le code export const USERS: User [] = [{id: 1, name: "Mandy", image: "mandy.jpg", hobbies: [HOBBIES [0]]}, {id: 2, nom: "Mandy1", image: "mandy1.jpg", hobbies: [HOBBIES [0], HOBBIES [0]]}] Veuillez essayer ceci
<h2>All Users</h2>
<ul *ngFor="let user of users">
<li>{{user.name}}</li>
<ul *ngFor="let hob of user.hobby">
<li>{{hob.hobbyType}}</li>
Il vaut mieux donner une explication à la réponse
Salut Raju, merci pour l'aide! Maintenant, tous les hobbiesType sont affichés sur chaque utilisateur. Mais ce n'est pas le résultat dont j'ai besoin comme je dois le montrer par exemple. ID utilisateur: # 1, HobbyType: Plongée; ID utilisateur: # 2, HobbyType: Swimming; ID utilisateur: # 3, HobbyType: Yoga, Natation et etc. Comment puis-je improviser le code à partir d'ici?