Question

我有一个对象将在服务器推送新数据时动态更改，我的对象是这样的：

rooms: [
{name: 'room1', users:
    [
        {id: 1, name: 'user1'},
        {id: 2, name: 'user2'}
    ],
name: 'room2', users:
    [
        {id: 3, name: 'user3'},
        {id: 4, name: 'user4'}
    ]
}]

我需要生成这个

<rooms>
    <room>
        <user>User1</user>
        <user>User2</user>
    </room>

    <room>
        <user>User3</user>
        <user>User4</user>
    </room>
</rooms>

我无法理解顶级组件如何在@component和class外部将更改元素（来自websocket的房间和用户）上的用户和batabind传递给子组件，我试图做类似的事情：< / p>

<rooms>
    <room *ngFor='room in rooms'>
        <user *ngFor='users in users'>

Answer 1

使用以下代码。

您的json必须修改为

rooms:any[]= [
    {name: 'room1', users:
        [   {id: 1, name: 'user1'},
            {id: 2, name: 'user2'}
        ]},
    {name: 'room2', users:
        [   {id: 3, name: 'user3'},
            {id: 4, name: 'user4'}
        ]
    }];

HTML看起来像

 <div>
      <h2>Hello {{name}}</h2>
      <div *ngFor="let room of rooms">
          {{room.name}}
          <div  *ngFor="let user of room.users">
                ID : {{user.id}} <br/>
                Name: {{user.name}}
          </div>

      </div>
    </div>

<强> Live Demo

Answer 2

也许你可以尝试 @ViewChild 来获取数据，然后 @Input（）来传递数据。

Answer 3

在您的情况下，您应该至少有3个组件。 rooms，room，user。

在您的rooms组件中，您的模板可能如下所示：

<h1>rooms</h1>
<div *ngFor="let room of rooms">
    <room [data]="room"></room>
</div>

然后在您的room组件中，您的模板可能如下所示：

<div>
   <h1>Room: {{ room.name }}</h1>
   <div *ngFor="let user of room.users">
       <user [data]="user"></user>
   </div>
</div>

在此示例中，您的room组件需要@Input，如下所示：

export class RoomComponent {
    @Input('data')
    room: any;
}

最后，您的user组件可能如下所示

<div>
   {{ user.name }}
</div>

用这样的课：

export class UserComponent {
    @Input('data')
    user: any;
}

您可以查看本教程：https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

Angular2如何数据绑定js对象

3 个答案: