2016-12-23 28 views
2

ngforループで使用される配列が更新されると、Angular2にその式を再実行させる方法を教えてください。現在、空の配列でbeginninで実行されているため、何も出力されません。一度更新されると(配列が変更された)ngfor式は再実行されません。これが望ましい機能です。これはどうですか?Angular2 Ng式のバインド配列

たとえば、コンポーネントHTMLでは、

<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option> 

コンポーネントTSではプロパティを宣言しています。 ngOnInitで

users: IUser[] = []; 

私達は私達のユーザーデータを返すTSサービスへの呼び出しを持っています。

this.userDataService.getUsers().subscribe(data => { 
    this.users = data; 
}); 

コード例が更新されました。

@Component({ 
    selector: 'app-manage-user', 
    templateUrl: './user-form.component.html', 
    providers: [UsersDataService] 
}) 
export class UserFormComponent implements OnInit { 

    constructor(private userDataService: UsersDataService) { 

    } 

    users: IUser[] = []; 

    ngOnInit() { 
    this.userDataService.getUsers().subscribe(user => { 
     this.users = user; 
    }); 
    } 
} 
+0

あなたは "更新された"とはどういう意味ですか?あなたの配列を "更新"したら、 'this.userDataService.getUsers ....'メソッドを呼び出さないのはなぜですか? – Alex

+0

getUsersはobservableを返すので、getUsers関数を呼び出してuserプロパティに直接割り当てることはできません。 – Jjj

+2

'* ngFor'は、変更検出が実行されるたびに配列の変更をチェックし、それに応じてDOMを更新します。上記の 'ngOnInit'コードを正確に使用していますか、それとも実際のコードではもっと複雑ですか? –

答えて

2

変更の検出にChangeDetectorRefを使用できます。

import {ChangeDetectorRef} from '@angular/core'; 

あなたのコンストラクタでそれを注入して、配列の値が変更された()メソッドdetectChangesを呼び出す:私は同じようにそれを使用することをお勧め

constructor(private userDataService: UsersDataService, private changeDetector: ChangeDetectorRef) { 

    } 

    users: IUser[] = []; 

    ngOnInit() { 
    this.userDataService.getUsers().subscribe(user => { 
     this.users = user; 
     this.changeDetector.detectChanges(); 
    }); 
    } 
+0

ああ、私は変化の検出器を忘れてしまった!どうもありがとうございます。 – Jjj

0

<select *ngIf="users.length >0"> 
<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option> 
</select 
0

あなたがチェックすることができますリクエスト高速配列が更新されないため:

ngOnInit() { 
    this.userDataService.getUsers().subscribe(user => { 
     if(user){ 
     this.users = user; 
     } 
    }); 
    } 
関連する問題