web-dev-qa-db-ja.com

PrimeNgデータテーブルが更新されない

Angular v2.4.8およびPrimeNg v1.1.4を使用する

2つのコンポーネントがあるページがあります。

  1. Dropzone、ファイルのアップロード用
  2. アップロードされたファイルを表示するp-datatable

一度に5つのファイルを送信するようにDropzoneを構成し、5つのファイルで終了すると、イベントonDropZoneSendingMultipleが発生します。すべてのファイルがアップロードされると、onDropZoneQueueCompleteが発生します。

両方のリスナーで、2番目のコンポーネントにあるデータテーブルを更新します。これは機能していません。新しいファイルを表示するには、ページを更新する必要があります。

メインページの私のHTML：

_<div class="row" id="dropzoneContainer">
    <dropzone class="dropzone" #dz [config]="dropZoneConfig" 
              (error)="onDropZoneUploadError($event)"
              (sendingmultiple)="onDropZoneSendingMultiple($event)"
              (queuecomplete)="onDropZoneQueueComplete($event, dz);"
              (maxfilesreached)="onDropZoneMaxfilesReached($event)"
              (maxfilesexceeded)="onDropZoneMaxfilesExceeded"></dropzone>
</div>

<div class="row">
    <div class="col-md-12">
        <FilesList></FilesList>
    </div>
</div>
_

Dropzone-コンポーネントはドロップゾーンを示します。 FilesListはデータテーブルを示します。 HTMLの一部：

_<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" (onRowSelect)="details($event)">
_

私のメインのTSファイルには次のものがあります：

_@ViewChild(FilesListComponent)
public filesListComponent: FilesListComponent;

private reloadFileList() {
  this.filesListComponent.reload();
}
_

私のファイルリストtsには

_public files: File[];
public reload() {
    this.getFiles();
}
public getFiles() {
    this.fileService.getAll()
        .then(
        data => {
            this.files = data;
        });
}
_

getFilesは、ページのロード時にも呼び出されます。 console.log()ステートメントを追加すると、getFiles()が呼び出され、_this.files_が更新されますが、テーブルは更新されません。

angulardatatableprimeng
11
Paul Meems

プライミングテーブルにバインドされた配列にレコードを追加する新しい構文をまだ探している人向け

this.arrayRecords= [...this.arrayRecords, newObject];

17
karthiks3000

Update：PrimeNGは、変更を自動的に検出していたDoCheckインターフェイスを最近削除しました。次を参照してください： https://www.primefaces.org/primeng- 4-0-0-rc4-released /

答えは、スプレッド演算子（[... arr]- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator ）を使用して.Push（）の代わりに配列にアイテムを追加します。

元の回答：似たような問題があり、少し異なるアプローチを使用して解決しました。同じサービスを使用してファイルをアップロードおよび取得する場合は、コンポーネント間でイベントをリッスンする代わりにRxJSを使用できます。

私のサービスでは、POSTまたはPUTを使用するときにアプリ全体にリロードしたい：

  private _shouldUpdateSource = new BehaviorSubject<boolean>(false);
  shouldUpdateObservable = this._shouldUpdateSource.asObservable();

POSTおよび/またはPUTメソッド

this.http.post(..).map( res => {this._shouldUpdateSource.next(true);});

これにより、コンポーネントのfileService.shouldUpdateObservableをサブスクライブできます。

 this.shouldUpdateSub = this.fileService.shouldUpdateObservable
  .subscribe((shouldUpdate: boolean) => {
    if (shouldUpdate) {
      this.updateFiles();
    }
  });

これは、私が見た/使用したコンポーネント間のサービスに関する通信を処理する最良の方法のようです。

-編集-公式ドキュメントの同じ概念を次に示します。
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

-編集2-4.0.0に更新した後、この問題に再び遭遇しました。 FWIW、私はPrimeNG Datatableを削除することになり、代わりに手動の* ngForを使用しましたが、うまくいきました。 PrimeNgのドキュメント（ https://www.primefaces.org/primeng/#/datatable ）は次のように指示しているようです：

「たとえば、アイテムを削除するときにスプライスの代わりにスライスを使用するか、アイテムを追加するときにプッシュメソッドの代わりにスプレッド演算子を使用します。」

公式のAngularドキュメンテーションがあなたにそうするように言っていることに反するので、彼らがあなたにこれをするように頼む理由はわかりませんが、[value]バインディングの理由と関係があると思います期待どおりに動作しません。

個人的には、明示的なrefresh（）関数を持つCovalentデータテーブルを優先して、PrimeNgから離れています： https://teradata.github.io/covalent/#/components/data-table

9
rbj325

[〜＃〜] update [〜＃〜]：p-dataTableの ドキュメント をよく見てみました。特に、変更検出というタイトルのセクション。 _[immutable]=false_タグの_p-dataTable_属性の回避策を削除し、代わりに、基になる配列を変更したときに次のようなものを返すことでテーブルを更新できるようにしました。

return myOriginalArray.slice();

[〜＃〜] original [〜＃〜]：アイテムを削除したときに_p-datatable_を更新/更新するのに問題がありましたテーブルの設定に使用される基本配列から。理由はわかりませんが、次の属性を_p-datatable_タグに追加すると問題が解決しました。

_[immutable]=false_

PrimeNG ^ 4.1.3を使用しています

5
twosouth

これは、子コンポーネントが変更を処理する方法に関係していると思われます。 onChangeイベントを実装し、そのようにファイルを設定する必要があります。以下に例を示します。

`` `

export class FilesListComponent implements OnChanges {
    @Input() files: File[];

    ngOnInit() {
    }

    // Subscribe to the change event and update the model
    ngOnChanges(changes: {[propName: string]: SimpleChange}) {
        let key = 'files';
        this.files = changes[key].currentValue;
    }
}

`` `

1
Ben Richards

ビューをチェック用にマークし、detechchangeを呼び出します。

@ViewChild('searchDt') searchTable: DataTable;


self.dealService.getAccounts(self.searchParams).subscribe((response) => {       
   Deal.setAvailableAccount(response.map((current) => {
     return {
        "cifNumber": current['cif'],
        "ucic": current['ucic'],
        "accountNomenclature": current['customerName'],
     }
   }));

   **self.searchTable.changeDetector.markForCheck();
   self.searchTable.changeDetector.detectChanges();**
});
0
blazehub