ここで、データ変更を反映するためにビューを取得する方法についてのもう1つの質問があります。データが変更されたときにAngular2ビューが更新されない
メインアプリケーションコンポーネントテンプレートでホストされているサービスと関連コンポーネント(ページメッセージ)があります。
サービスは配列を公開します。アレイの初期データは表示されますが、アレイの変更はビューで認識されません。
私は、この作業を行うためにrx Observableを使用する必要があるかもしれないと思っていますが、それがいつ必要なのかはっきりしていません。
編集:ここではが観察が必要とされていないことを実証する作業Plunkerです:https://plnkr.co/edit/2iK9YOwLFfY3EylJn6At?p=preview
私はmessageService.pageErrorMessagesへの変更を認識してレンダリングするページ・メッセージのコンポーネントHTMLビューを取得するために何をしないのですアレイ?
app.component.html
<page-message></page-message>
app.component.ts私は
@Component({
moduleId: __moduleName, // fully resolved filename; defined at module load time
selector: 'my-app',
directives: [ROUTER_DIRECTIVES, NavbarComponent, PageMessageComponent],
templateUrl: "app.component.html",
providers: [ApiService, MessageService]
})
export class AppComponent {
...
アプリのコンポーネントにメッセージをサービスを提供しています実証するスニペットを.service.ts
私はこれが更新されていないコンポーネントのHTMLである*メッセージ
import {Injectable} from '@angular/core';
@Injectable()
export class MessageService {
constructor() {
}
pageErrorMessages: Array<string> = new Array();
addPageError(message: string) {
this.pageErrorMessages.push(message);
}
}
ページ-message.component.html
を追加/削除するためのインタフェースを提供するために、message.serviceを使用しています正しく*
<div *ngFor="#message of messageService.pageErrorMessages">
<div class="alert alert-danger">{{message}}</div>
</div>
ページ-message.component.ts
import {Component} from '@angular/core';
import {MessageService} from "./../services/message.service";
@Component({
moduleId: __moduleName,
selector: __moduleName,
templateUrl: "page-message.component.html",
providers: []
})
export class PageMessageComponent {
constructor(public messageService: MessageService) { }
}
いくつか-他-component.ts
私はそれと主張@マークRajcokにメッセージアレイに
submit() {
this.messageService.addPageError("this is an error");
}
some-other-component.tsに 'providers:[MessageService]'がありますか?もしそうなら、それはあなたの問題です...あなたはあなたのサービスの2つのインスタンスを持っています。サービスを一度提供してください。サービスは、コンポーネントツリーのどこか高いところに置いてください。 –
それは良い質問です。質問の元のコードは私にページメッセージでも提供してくれましたが、それ以降は削除してapp.component.tsでサービスを提供しています。 –
'submit()'を呼び出すコードは何ですか?最終的に 'submit()'を呼び出すトリガイベントがAngularによってサルパッチされていない場合、変更検出は実行されないため、ビューは更新されません。 (これを機能させるためにObservableは必要ありません... NgForは角度変化検出が実行されるたびに配列の各項目をチェックします) –