PrimeNG 数据表变化检测

Question

所以我们又来了 ;)

我有一个 PrimeNG 数据 Table，其中包含一些简单数据和一个获取 API 数据的服务。

所以我是 Angular 的新手，无法理解为什么我的 Table 视图没有更新，例如当我添加条目时。

如果有人能给我提示或解决方案如何检测数据 Tables 的变化，我会很高兴。

我希望我已经提供了任何需要的代码，否则我会Post稍后提供。

提前交易 ;)

//组件

import {Component, OnInit} from '@angular/core';
import {KnowledgeBaseService} from '../../../services/knowledge-base.service';
import {WikiModel} from '../../../../models/wiki.model';
import {HttpClient} from '@angular/common/http';
import {CommonService} from '../../../services/common.service';


@Component({
  selector: 'app-knwoledge-center-admin',
  templateUrl: './knowledge-base-admin.component.html',
  styleUrls: ['./knowledge-base-admin.component.scss']
})
export class KnowledgeBaseAdminComponent implements OnInit {

  displayDialog: boolean = false;
  wikiList: WikiModel;
  wikiItemNew = new WikiModel();
  selectedItem: WikiModel = null;

  constructor(private knowledgebaseService: KnowledgeBaseService, private commonService: CommonService, protected http: HttpClient) {
  }

  ngOnInit() {
    this.getWikiList();
  }

  getWikiList(): void {
    this.knowledgebaseService.getWikiList().subscribe(
      data => {
        this.wikiList = data;
        console.log(this.wikiList);
      },
      err => console.error(err),
      () => console.log('Wiki Items Geladen')
    );
  }
  onRowSelect(event) {
    console.log(event);
  }

  showDialogToAdd() {
    this.displayDialog = true;
  }

/*  showDialogToEdit() {
    if ( !this.selectedItem ) {
      alert('Bitte zuerst einen Eintrag auswählen');
      return;
    }
    this.editItem = <WikiModelOld>this.selectedItem.clone();
    Object.assign(this.editItem, this.selectedItem);
    this.displayDialog = true;
  }*/

  addWikiItem() {
    this.knowledgebaseService.createWikiItem(this.wikiItemNew).subscribe(res => {
    });
    this.displayDialog = false;

  }

}

//服务从我的 API 获取数据 getWikiList 获取显示在数据 Table 中的 Objects 数组一些带有标题文本和关键字的简单文章。

import {Injectable, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpRequest, HttpResponse} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {catchError, map, take} from 'rxjs/operators';
import {Observable, pipe, throwError} from 'rxjs';
import {WikiModel} from '../../models/wiki.model';


@Injectable()
export class KnowledgeBaseService {

  wikiApiUrl: string = environment.wikiApiUrl;
  wikiApiKeywordsPlain: string = environment.wikiApiKeywordsPlain;
  wikiApiKeywordObjects: string = environment.wikiApiKeywordObjects;
  wikiApiList:string = environment.wikiApiList;


  constructor(protected http: HttpClient) {

  }

  getWikiList() {
    return this.http.get(this.wikiApiList)
      .pipe(map((data: any) => data.result),
        catchError(error => {
          return throwError('Its a Trap!');
        })
      );
  }

 createWikiItem(wikiItem){
    return this.http.post(this.wikiApiUrl, wikiItem);
  }

  updateWikiItem(WikiItem) {
    return this.http.put(this.wikiApiUrl, {
      title: WikiItem.title,
      text: WikiItem.text,
      keyWords: WikiItem.keyWords
    });
  }

  getKeyWordsPlain() {
    return this.http.get(this.wikiApiKeywordsPlain)
      .pipe(map((data: any) => data.result),
        catchError(error => {
          return throwError('ERROR KeyWords Plain !');
        })
      );
  }

  getKeyWordObjects() {
    return this.http.get(this.wikiApiKeywordObjects)
      .pipe(map((data: any) => data.result),
        catchError(error => {
          return throwError('ERROR Keyword Objects');
        })
      );
  }

}

//模板

<div class="section section-wiki-admin-head">
  <h1 class="h-centered">Begriffsdatenbank</h1>
</div>
<div class="section section-wiki-admin-table">
  <div class="wiki-articles-table-container">

    <p-table [value]="wikiList" selectionMode="single" [(selection)]="selectedItem" (onRowSelect)="onRowSelect($event)">
      <ng-template pTemplate="header">
        <tr>
          <th>Begriff</th>
          <th>Beschreibung</th>
          <th>Schlagworte</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-wikiList>
        <tr [pSelectableRow]="wikiList">
          <td>{{wikiList.title}}</td>
          <td>{{wikiList.text}}</td>
          <td>{{wikiList.keyWords}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>
<div class="section section-wiki-admin-footer">
  <div class="wiki-articles-table-toolbar">
    <button type="button" pButton icon="fa fa-plus" (click)="showDialogToAdd()" label="Neu"
            class="wiki-a-footer-btn"></button>

  </div>
</div>
<p-dialog [header]="editItem && editItem._id > 0 ? 'Bearbeiten' : 'Hinzufügen'" [(visible)]="displayDialog"
          [responsive]="true" showEffect="fade" [modal]="true" [width]="600">
  <div class="ui-g ui-fluid">

    <div>
      <div class="ui-g-12 wikiTitleContainer">
        <label for="wikiTitleInput">Titel</label>
      </div>
      <div class="ui-g-12 wikiInputContainer">
        <input pInputText id="wikiTitleInput" [(ngModel)]="wikiItemNew.title" name="wiki_title"/>
      </div>
    </div>
    <div>
      <div class="ui-g-12 wikiTitleContainer">
        <label for="wikiText">Wiki Text</label>
      </div>
      <div class="ui-g-12 wikiInputContainer">
        <textarea id="wikiText" [rows]="5" [cols]="49" [(ngModel)]="wikiItemNew.text" pInputTextarea
                  name="wiki_text"></textarea>
      </div>
    </div>

    <div>
      <div class="ui-g-12 wikiTitleContainer">
        <label for="wikiChips">Schlagworte</label>
      </div>
      <div class="ui-g-12 wikiInputContainer">
        <p-chips id="wikiChips" [(ngModel)]="wikiItemNew.keyWords"></p-chips>
      </div>
    </div>

  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-helper-clearfix">
      <button type="button" pButton (click)="addWikiItem();" icon="fa fa-save" label="Speichern"></button>
    </div>
  </p-footer>
</p-dialog>

//型号

export class WikiModel {

  constructor(title?: string, text?: string, keyWords?: string, _id?: number,) {
    this.title = '';
    this.text = '';
    this.keyWords = '';
    this._id = '';


  }

  public title;
  public text;
  public keyWords;
  public _id;

Answer 1

您可以使用 detectChanges() 进行手动触发。分配数据后，只需调用，

chRef.detectChanges();

constructor(private ref: ChangeDetectorRef) {}

并致电

 this.ref.detectChanges();

PrimeNG 数据表变化检测

PrimeNG DataTable Change Detection

angular

primeng

primeng-datatable