Question

我遇到了有问题的问题。这是我的html页面，其中包含表格：

<div class="content">
    <div class="row">
        <div class="col-6 col-md-4 col-xl-2">
            <button class="mat-raised-button" [routerLink]="['add']">Aggiungi</button>
        </div>
    </div>
    <mat-card>
        <mat-card-content>
            <table mat-table #table matSort [dataSource]="dataSource">

                <!--- Note that these columns can be defined in any order.
                      The actual rendered columns are set as a property on the row definition" -->

                <!-- Position Column -->
                <ng-container matColumnDef="position">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
                    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
                </ng-container>

                <!-- Name Column -->
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Nome</th>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="weight">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Capo</th>
                </ng-container>

                <!-- Symbol Column -->
                <ng-container matColumnDef="symbol">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Indirizzo</th>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            </table>
        </mat-card-content>
    </mat-card>
</div>

这是组件：

import {Component} from '@angular/core';
import {Company} from "../../../core/Model/Company";
import {CompanyAPIsService} from "../../../core/API/CompanyAPIs.service";
import {DataSource} from '@angular/cdk/collections';
import {MatTableDataSource} from "@angular/material";

@Component({
    selector: 'admin-index-company',
    templateUrl: 'app/admin/company/index/admin-indexCompany.component.html',
})
export class AdminIndexCompanyComponent {

    /**
     * Empty array of type Company[]
     * @type {Company[]}
     */
    companies: Company[] = [];

    /**
     * Table column'names
     * @type {string[]}
     */
    displayedColumns = ['position', 'name', 'weight', 'symbol'];

    dataSource: MatTableDataSource<Company>;

    constructor(private companyService: CompanyAPIsService) {
        companyService.getAllCompanies().then((company: Company[])=>{
            this.companies = company;
            this.dataSource = new MatTableDataSource<Company>(this.companies);
            console.log(this.dataSource);
            console.log(this.companies);
        })
    }
}

它不起作用，因为没有显示任何东西，我真的不知道为什么。另外一个错误出现在html页面中，matCellDef，显示'预期'。这似乎很奇怪，因为我将一个对象传递给MatTableDataSource的Datasource。是的，我已经导入了MatTable模块。这是我应该打印的数据：

我想打印id以获得简洁。

Answer 1

您需要为仅为id列执行的每个列定义td。

<!-- Position Column -->
            <ng-container matColumnDef="position">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
                <td mat-cell *matCellDef="let element"> {{element.id}} </td>
            </ng-container>

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

            <!-- Weight Column -->
            <ng-container matColumnDef="weight">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Capo</th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="symbol">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Indirizzo</th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
            </ng-container>

Answer 2

您是否在模块中注入了AdminIndexCompanyComponent

import { AdminIndexCompanyComponent } from './your-component-file-path';
@NgModule({
imports: [
    BrowserModule
],
declarations: [
    .....,
    AdminIndexCompanyComponent 
]
bootstrap: [AppComponent]})

export class AppModule { }

像这样!!

角度材料2不起作用

2 个答案: