Угловой материал2 не работает - PullRequest
Новая
       8

Угловой материал2 не работает

0 голосов
/ 11 мая 2018

У меня проблема с angular'table. Это моя 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. И да, я импортировал модуль MatTable. Это данные, которые я должен напечатать: enter image description here

Я хочу напечатать идентификатор для простоты.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Вы вводите AdminIndexCompanyComponent в свой модуль 

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

export class AppModule { }

вот так !!

0 голосов
/ 11 мая 2018

Вам нужно определить td для каждого столбца, который вы сделали только для столбца id.

<!-- 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>
...