Question

我一直试图在 angular-cli 创建的应用程序中使 mat-table 工作，遗憾的是我还没有设法让mat-table工作。首先，我使用前缀“md”进行操作，但我发现版本2.0.0-beta.12 不再使用这样的前缀。

以下是实施代码的部分：

表格-resume.component.html：

<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="Origen">
        <mat-header-cell *matHeaderCellDef> Origen </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.origen}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Campania">
        <mat-header-cell *matHeaderCellDef> Campania </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.Campania}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="MercadoAbierto">
        <mat-header-cell *matHeaderCellDef> MercadoAbierto </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.MercadoAbierto}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

表格-resume.component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/table';
import { ActividadComercialService } from 
'../../services/data.actividadComercial';
import { DataResume } from './table-resume-interface';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

@Component({
selector: 'app-table-resume',
templateUrl: './table-resume.component.html',
styleUrls: ['./table-resume.component.css'],
providers: [ActividadComercialService]
})
export class TableResumeComponent implements OnInit{
dataSource: ActComerDataSource | null;
data: Array<any>;
displayedColumns: 
['Origen', 'Campañas', 'Mercado Abierto', 'Efectivas', 'No                 
Efectivas', 'Cerradas', 'Sin Cerrar'];

constructor(private actComerService: ActividadComercialService) { }

ngOnInit() {
console.log('entra');
this.getDataActComercial();
}

getDataActComercial() {
this.actComerService.connect()
  .subscribe(
  resultData => {
    this.data = resultData;
    console.log(this.data);
    this.dataSource = new ActComerDataSource(this.data);
  },
  error => console.log(`Error: ${error}`)
  )
 }
}

export class ActComerDataSource extends DataSource<any>{
  constructor(private data: DataResume[]) {
   super();
 }

connect(): Observable<DataResume[]> {
return Observable.of(this.data);
}

disconnect() {

}
}

表格-resume.interface.ts：

export interface DataResume {
  origen: string;
  Campania: number;
  MercadoAbierto: number;
  Efectivas: number;
  NoEfectivas: number;
  Cerradas: number;
  NoCerradas: number;
}

data.actividadComercial.ts（service）：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';
import { DataResume } from '../components/table-resume/table-resume-interface';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/observable/throw';

@Injectable()
export class ActividadComercialService {

    private _postUrl: string;

    constructor(private http: Http) {
        this._postUrl = "http://domain.dummy.com/dummy/actividadComercial";
    }

    connect(): Observable<DataResume[]> {
        console.log('algo');
        return this.http.get(this._postUrl).map((response: Response) => {
            return <DataResume[]>response.json();
        }).catch(this.handleError);
    }

    private handleError(error: Response) {
        return Observable.throw(error.statusText);
        // return Observable.t
    }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { FlexLayoutModule } from '@angular/flex-layout';


import { AppComponent } from './app.component';
import { dataService } from './services/data.services';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { MatTableModule } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';

import {
  ActividadComercialComponent,
  HeaderComponent,
  OptimoComponent,
  VentasCantadasComponent,
  TableResumeComponent
} from './components/index';

import { ActividadComercialService } from './services/data.actividadComercial';

@NgModule({
  declarations: [
    AppComponent,
    ActividadComercialComponent,
    HeaderComponent,
    OptimoComponent,
    VentasCantadasComponent,
    TableResumeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    MatTableModule,
    CdkTableModule,
  ],
  providers: [dataService,ActividadComercialService],
  bootstrap: [AppComponent]
})
export class AppModule {

}

最后，一切顺利，没有错误，但是，数据没有在表格中绘制。

mat-table不使用材料4中的材料设计

0 个答案: