Angular MatTable 不会更新来自表单的数据 [英] Angular MatTable does not update with data that comes from a Form

问题描述

我只是在学习 Angular(实际上几个月前开始学习 Web 开发).我想将表单中的数据显示到表中.我有以下模型:

导出类内容{id: 数字 = 0;标题?:字符串；副标题?:字符串；内容?:字符串；日期?:字符串；媒体?:字符串；}

然后，我有一个包含一些方法的表单，如 onSubmit() 将数据推送到数组中.

onSubmit() {如果(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 creo Correctamente');console.log(this.contentsList);}

当我 console.log contentsList 它显示表单中的新数据，但它没有显示在表格中:

dataSource = this.contentsList;columnsToDisplay = ['title', 'subtitle', 'body', 'date'];扩展元素:内容 |空|不明确的;

这是我的桌子:

<预><代码><table mat-table [dataSource]="dataSource";multiTemplateDataRows class="mat-elevation-z8"><ng-container matColumnDef="{{column}}";*ngFor="let column of columnsToDisplay"><th mat-h​​eader-cell *matHeaderCellDef>{{column}} </th><td mat-cell *matCellDef=让内容">{{content[column]}} </td></ng-容器><!-- 扩展内容列- 详细信息行由跨越所有列的这一列组成--><ng-container matColumnDef="expandedDetail"><td mat-cell *matCellDef="let element[attr.colspan]="columnsToDisplay.length"><div class="example-element-detail";[@detailExpand]=元素 == 扩展元素?'展开':'折叠'><div class="example-element-diagram"><div class="example-element-position">{{content.title}} </div><div class="example-element-symbol">{{content.subtitle}} </div><div class="example-element-name">{{content.date}} </div><div class="example-element-weight">{{content.body}} </div>

<div class="example-element-description">{{content.body}}<span class="example-element-description-attribution"></span>

</td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef=columnsToDisplay"></tr><tr mat-row *matRowDef="let content;列:columnsToDisplay;"类=示例元素行"[class.example-expanded-row]=expandedElement === content"；(click)="expandedElement = expandElement === content ?null:内容"></tr><tr mat-row *matRowDef="let row;列:['expandedDetail']"class="example-detail-row"></tr>

解决方案

没有关于 changeDetectorRef.MatTable 的问题是，如果我们添加/删除/更改数据源的一个元素，我们需要说再次重绘表格请参阅 DataSource API

<块引用>

如果提供了数据数组，则必须在添加、删除或移动数组对象时通知表.这可以通过调用 renderRows() 函数来完成，该函数将渲染自上次表格渲染以来的差异.如果数据数组引用发生变化，表将自动触发对行的更新

因此，如果您的组件中只有一张表，则可以使用 ViewChild 来获取该表

@ViewChild(MatTable) table:MatTable

所以，当你添加元素时，你使用 this.table.renderRows().

if (this.selectedContent.id === 0) {...this.table.renderRows()}

但是您需要在代码中考虑另一件事.你用

//代码有误如果(this.selectedContent.id === 0){this.contentsList.push(this.selectedContent);}this.selectedContent = new Content();

是错误的，因为您添加了相同的对象"，您需要制作一个副本"的对象.如果你的对象是一个简单的对象，这个副本可以使用spreadOperator来制作，这样函数就变成finally了

onSubmit() {如果(this.selectedContent.id === 0){this.selectedContent.id = this.contentsList.length + 1;//推送一个对象的副本"this.contentsList.push({...this.selectedContent});this.table.renderRows()}this.selectedContent = new Content();}

I'm just learning Angular (actually started to learn web development a few months ago). I want to display data from a Form into a table. I have the following model:

export class Content {

    id: number = 0;
    title?: string;
    subtitle?: string;
    content?: string;
    date?: string;
    media?: string;
}

Then, I have a form with some methods as onSubmit() that pushes data into an array.

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

When I console.log contentsList it shows with the new data from the form, but it does not show in the table:

dataSource = this.contentsList;
columnsToDisplay = ['title', 'subtitle', 'body', 'date'];
expandedElement: Content | null | undefined;

This is my table:

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
    <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 class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                <div class="example-element-diagram">
                    <div class="example-element-position"> {{content.title}} </div>
                    <div class="example-element-symbol"> {{content.subtitle}} </div>
                    <div class="example-element-name"> {{content.date}} </div>
                    <div class="example-element-weight"> {{content.body}} </div>
                </div>
                <div class="example-element-description">
                  {{content.body}}
                  <span class="example-element-description-attribution"> </span>
                </div>
            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let content; columns: columnsToDisplay;"
      class="example-element-row" [class.example-expanded-row]="expandedElement === content" (click)="expandedElement = expandedElement === content ? null : content">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

解决方案

Has no about changeDetectorRef. the problem with a MatTable is that if we add/remove/change an element of the datasource we need say that redraw the table again See the docs, in the API about DataSource

If a data array is provided, the table must be notified when the array's objects are added, removed, or moved. This can be done by calling the renderRows() function which will render the diff since the last table render. If the data array reference is changed, the table will automatically trigger an update to the rows

So, if you only has one table in your component you can use ViewChild to get the table

@ViewChild(MatTable) table:MatTable<any>

So, when you add the element you use this.table.renderRows().

if (this.selectedContent.id === 0) {
    ...
    this.table.renderRows()
}

But you need take account another thing in your code. You use

//the code is WRONG
if (this.selectedContent.id === 0) {
  this.contentsList.push(this.selectedContent);
}
this.selectedContent = new Content();

Is wrong because you are adding the same "object", you need make a "copy" of the object. If your object is a simple object, this copy can be make it using the spreadOperator, so the function becomes finally like

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

这篇关于Angular MatTable 不会更新来自表单的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！