PrimeNG数据表更改检测

Question

所以我们来了。。再次；(

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

所以我对Angular很陌生，不明白为什么我的表视图在更改时没有更新，例如当我添加条目时。

如果有人能给我一个提示或解决方案来检测数据表上的更改，那就太好了。

我希望我已经提供了任何需要的代码，如果没有，我会稍后发布。

提前发送；(

//组件

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获取数据表中显示的对象数组一些带有、标题文本和关键字的简单文章。

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();