Tìm kiếm trang web

javascript - Nhận lỗi: Không thể gán 'dataSource' vì nó không phải là một thuộc tính đã biết của 'table'


Tôi đang cố gắng tạo một hộp thoại với một bảng bên trong. Tôi đã tạo nó rồi nhưng sau đó tôi được bảo nên sử dụng mat-table thay vì tạo bảng từ đầu và kể từ đó, tôi đã bị mắc kẹt với lỗi cụ thể này. Tôi sẽ chia sẻ mã của mình để tiện hơn. Đây là các tệp mà tôi có.

asm-prop.interface.ts

export interface Properties {
    name: string;
    value: number;
}

asm-prop.component.ts

import { Component, ViewChild } from '@angular/core';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { MatDialogRef } from '@angular/material/dialog';
import { AssemblyFetchService } from 'src/app/assembly/assembly-fetch.service';
import { Properties } from './asm-prop.interface';

@Component({
    selector: 'asm-prop',
    templateUrl: 'asm-prop.component.html',
    styleUrls: ['asm-prop.component.scss'],
    providers: []
})
export class AsmPropComponent {

    @ViewChild(ContextMenuComponent) public customContextMenu: ContextMenuComponent;

    asmProps = null;
    displayedColumns: string[] = ['Property Name', 'Value'];
    storedProperties: Properties[];

    public constructor(public asmPropDialogRef: MatDialogRef<AsmPropComponent>, public asmFetchServ: AssemblyFetchService) {

        this.storedProperties = [
            { name: 'Number of Assemblies:', value: this.asmFetchServ.propertiesDialogComponentStatistics.propertiesDialogComponentStatistics.assembly_statistics.num_assemblies },
            { name: 'Number of Assembly Instances:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_assembly_instances },
            { name: 'Number of Part Instances:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_assembly_instances },
            { name: 'Number of Parts:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_parts },
            { name: 'Number of Contact Instances', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_contacts },
            { name: 'Number of Contacts:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_contacts },
            { name: 'Nesting Level:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.nesting_level },
        ];
    }

    closeDialog(): void {
        this.asmPropDialogRef.close();
    }
}

asm-prop.component.html

<h1 mat-dialog-title> Properties of {{asmFetchServ.propertiesDialogComponentName}}</h1>
<div>
    <table mat-table #table [dataSource]="storedProperties" class="mat-elevation-z8">
        <!-- Position Column -->
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Property Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="value">
            <th mat-header-cell *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let element"> {{element.value}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef=" displayedColumns">
        </tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <div mat-dialog-actions>
        <button mat-button (click)="closeDialog()">Close</button>
    </div>

Để bạn biết, tôi đã thêm MatTableModule vào app.module.ts. Cách đúng để thực hiện việc này là gì?