如何将数据导入到Angular中的另一个模型？

Question

我是Angular的新手，有一些亟待解决的问题。由于我对这门语言没有经验，我希望你们都能理解我所问的问题。

我翻遍了书和其他资料，但似乎找不到正确的答案

在我的user.ts中，我声明了User类

export class User {
  constructor(public id:number, public name: string, public image: string, public hobbies: any ) {}
}

在我的hobbies.ts中我声明了Hobbies类

export class Hobby {
  constructor(public id:number, public hobbyType:string, public hobbyDesc:string) {}
}

我在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."}
]

我在另一个ts中列出了一个用户数组

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>}
]

因此，预期的结果将是在User.componment.html中显示用户列表，并显示用户的兴趣爱好。姓名: Mandy <br>图片来源: mandy.jpg <br>爱好:潜水

我估计html代码会是这样的？

<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>

谢谢你的帮助！

Answer 1

我想您是在问如何在const用户中设置hobbies属性。然后，首先将User Class hobbies属性类型更改为Hobby数组，如下所示：

export class User {
  constructor(public id:number, public name: string, public image: string, public hobbies: Hobby[] ) {}
}

然后，您可以在const用户中分配hobbies属性，如下所示

import {Hobby} from './hobby.ts';
import {HOBBIES} from './hobby-list.ts';
export const USERS: User[] = [{id:1, name:"Mandy",image:"mandy.jpg",hobbies:HOBBIES }
]

在组件类文件赋值中

this.users =USERS // assign the USER constant

在HTML中

<div *ngFor="let user of users">
  {{user.name}} <br/>
   <img [src]="user.image"/> <br/>
   Hobbies 
   <ul *ngFor="let hob of users.hobby">
     <li>{{hob.hobbyType}}</li>
   </ul>
</div>

将一些特定的爱好分配给users.Create类变量。

hobbies :  Hobby[] =HOBBIES ;

现在分配用户

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] ] }
]

或者，您可以按如下方式分配爱好

    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]] }

    ]

Answer 2

问题是您的导入，您在模型中进行解构或使用export default，例如：export default class User {}，但对于仅导出，您需要像这样应用解构：

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>}
]

Answer 3

 export class Hobby {

     id:number;
     hobbyType:string;
     hobbyDesc:string

    }



export class User {

id:number;
name: string; 
image: string;

hobby: Hobby

}


export class Users {

 user: User [];


}

模板中的

<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>