我只是在學習 Angular（實際上是幾個月前開始學習 Web 開發的）。我想將表單中的資料顯示到表中。我有以下模型：
export class Content {
id: number = 0;
title?: string;
subtitle?: string;
content?: string;
date?: string;
media?: string;
}
然后，我有一個帶有一些方法的表單，因為onSubmit()它將資料推送到一個陣列中。
onSubmit() {
if (this.selectedContent.id === 0) {
this.selectedContent.id = this.contentsList.length 1;
this.contentsList.push(this.selectedContent);
}
this.selectedContent = new Content();
this.notificationService.success('El postulante se creó correctamente');
console.log(this.contentsList);
}
當我 console.logcontentsList顯示表單中的新資料時，它沒有顯示在表中：
dataSource = this.contentsList;
columnsToDisplay = ['title', 'subtitle', 'body', 'date'];
expandedElement: Content | null | undefined;
這是我的桌子：
<table mat-table [dataSource]="dataSource" multiTemplateDataRows >
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let content"> {{content[column]}} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element[attr.colspan]="columnsToDisplay.length">
<div [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div >
<div > {{content.title}} </div>
<div > {{content.subtitle}} </div>
<div > {{content.date}} </div>
<div > {{content.body}} </div>
</div>
<div >
{{content.body}}
<span > </span>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let content; columns: columnsToDisplay;"
[class.example-expanded-row]="expandedElement === content" (click)="expandedElement = expandedElement === content ? null : content">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" ></tr>
</table>
我很抱歉我的英語，我來自阿根廷。
提前致謝。
uj5u.com熱心網友回復：
可能是您changeDetection在組件中使用了方法。如果您有，請查看您的 ts 檔案ChangeDetectionStrategy
這是示例代碼。
@Component({
selector: 'test',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './test.component.html',
styleUrls: ['test.component.scss'],
})
如果您有更改檢測，則有兩種方法可以解決此問題。
只需從組件 ts 檔案中洗掉以下行。
changeDetection: ChangeDetectionStrategy.OnPush請將以下代碼添加到您的 ts 組件檔案中。
在 ts 檔案的頂部匯入 ChangeDetectorRef。
import { ChangeDetectorRef } from '@angular/core';
添加對建構式的參考。
constructor(public changeDetectorRef: ChangeDetectorRef) { }
在onSubmit方法末尾的行下方添加。
this.changeDetectorRef.detectChanges();
uj5u.com熱心網友回復：
沒有關于changeDetectorRef。MatTable 的問題是，如果我們添加/洗掉/更改資料源的一個元素，我們需要說再次重繪表格 請參閱有關 DataSource的API 中的檔案
如果提供了資料陣列，則必須在添加、洗掉或移動陣列物件時通知表。這可以通過呼叫 renderRows() 函式來完成，該函式將渲染自上次表格渲染以來的差異。如果資料陣列參考發生變化，表將自動觸發對行的更新
因此，如果您的組件中只有一張表，則可以使用 ViewChild 來獲取該表
@ViewChild(MatTable) table:MatTable<any>
因此，當您添加元素時，您使用this.table.renderRows().
if (this.selectedContent.id === 0) {
...
this.table.renderRows()
}
但是您需要在代碼中考慮另一件事。你用
//the code is WRONG
if (this.selectedContent.id === 0) {
this.contentsList.push(this.selectedContent);
}
this.selectedContent = new Content();
是錯誤的，因為您正在添加相同的“物件”，您需要制作該物件的“副本”。如果你的物件是一個簡單的物件，這個副本可以使用 spreadOperator 來制作，所以這個函式最終變成了
onSubmit() {
if (this.selectedContent.id === 0) {
this.selectedContent.id = this.contentsList.length 1;
//push a "copy of the object
this.contentsList.push({...this.selectedContent});
this.table.renderRows()
}
this.selectedContent = new Content();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/327192.html
上一篇：在回圈中生成時將表單驗證錯誤訊息鏈接到特定表單實體-PHP
下一篇：表單輸入驗證ReactJS