Angular2 wie man Databind js Objekt

Question

Ich habe ein Objekt, das dynamisch geändert werden, wenn der Server neue Daten schiebt, mein Objekt, wie das ist:

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

und ich brauche diesen

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

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

zu erzeugen

Ich kann nicht verstehen, wie eine Top-Komponente die Objekte an die Sub-Komponenten mit Benutzern und batind auf geänderte Elemente (Räume und Benutzer von WebSocket) extern in @Komponente und Klasse übergeben kann, ich versuche, so etwas zu tun:

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

Answer 1

Verwenden Sie den folgenden Code.

Ihre json muss modifiziert werden, wie

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 wie

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

aussehen

Live Demo

Answer 2

Vielleicht können Sie versuchen, @ViewChild die Daten zu erhalten und @Input() zu übergeben es.

Answer 3

In Ihrem Fall sollten Sie mindestens 3 Komponenten haben. A rooms, room, user.

In Ihrem rooms Komponente, die Vorlage wie folgt aussehen:

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

Dann in Ihrem room Komponente, die Vorlage wie folgt aussehen:

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

In diesem Beispiel Ihre room Komponente erwartet eine @Input, so:

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

Schließlich Ihre user Komponente wie diese wie folgt

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

Mit Klasse aussehen:

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

Wahrscheinlich Sie einen Blick auf dieses Tutorial nehmen: https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components