1

REST API と通信する CRUD アプリを作成しましたが、1 つのアイテムが削除された後にビューを更新する方法が見つかりません。私は過去に router.navigate を使用して、 create メソッドなどの他のメソッドの後にビューを変更しましたが、これは正常に機能します。

問題は、削除メソッドを呼び出すイベントがアイテムの同じリスト内にあることです (すべての *ngFor アイテムには独自の削除イベントがあります)。したがって、アイテムを削除してから router.navigate を使用して現在のビューに移動すると、既にそこにいるため何も実行されず、削除されたアイテムのないビューの更新されたバージョンが機能していても表示されません。

route.navigate を使用せずにビューを更新する他の方法はありますか?

編集：

ChangeDetectorRef を実装しようとしましたが、まだ機能していません...

コンポーネントは次のとおりです。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiNoticiasService } from './api-noticias.service';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-noticias',
  templateUrl: 'noticias.component.html',
  styleUrls: ['noticias.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ApiNoticiasService]
})
export class NoticiasComponent implements OnInit {
  noticias: any;

  constructor(
    private cd: ChangeDetectorRef,
    private _apiNoticias: ApiNoticiasService) { }

  ngOnInit() {
    this._apiNoticias.getNoticias()
      .then( (noticias) => this.noticias = noticias)
      .catch((err) => {
        console.log(err);
      });
  }

  deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
  }

}

そして、これはサービスのメソッドです:

deleteNoticia(id) {
    return this._http.delete('http://localhost:3000/noticias/' +id)
      .map((response: Response) => response.json())
      .toPromise()
      .catch((err: any) => {
        console.log(err); 
        return Promise.reject(err);
      });
  }
4

2 に答える 2

3

あなたが探しているトピックは、変更検出です。公式ドキュメントはまだそれについて多くを語っていないようですが、このブログ投稿ではかなり詳細に説明しています.

デフォルトではすべてのイベントですべてをチェックし、削除を自動的にキャッチする必要があるため、プッシュ変更検出で使用していると思います。それをやめてデフォルトに戻すこともできますが、その設定で期待していたパフォーマンスの向上は失われてしまいます。

プッシュ変更の検出を続けるために、問題に関連するセクションはページの約 3/4 です。ChangeDetectorRefアイテムを表示するコンポーネントにを挿入しmarkForCheck()、削除が発生したときにそれを呼び出す必要があります。

編集：あなたのコードを見ると、あなたの問題は、実際にはビュー内のデータを更新していないということです。サーバーはアイテムを削除した可能性がありますが、クライアントのローカル コピーはまだそこにあります。

適切に変更してローカル データを手動で削除するかnoticias、サーバーからバッチ全体を再フェッチして、ローカル キャッシュを新しくフェッチした結果に置き換える必要がありますngOnInit。後者のオプションは.then()、削除の約束の中で実行する必要があります。そうしないと、正しい結果を得ることが競合状態の対象になります。

于 2016-07-31T21:35:14.720 に答える
0

実際には、削除関数は次のようになります。

deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
    this.ngOnInit();
  }

リストを再度取得するには、ngOnInit() 関数を再度呼び出す必要があります。

于 2017-08-08T06:37:05.513 に答える