Question

我在此站点找到了答案，我得到了一些答案，但我没有解决我的问题。我在这里看到并阅读了很多东西，但是什么也没有。

我不会用我的代码填充mat-table。这是我的 html 。

<div>
  <table mat-table [dataSource] = "dataSource" class="mat-elevation-z8">

     <ng-container matColumnDef="codigo">
       <th mat-header-cell *matHeaderCellDef> Codigo </th>
       <td mat-cell *matCellDef="let oper"> {{oper.operatorId}} </td>
    </ng-container>

    <ng-container matColumnDef="nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let oper"> {{oper.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let oper; columns: displayedColumns;"></tr>
  </table>
</div>

当我在邮递员中运行我的 API 时，我得到了

"itens": [
        [
            {
                "operatorId": "819ee9cc-70b6-44dc-b9e8-afff8705142c",
                "name": "Paulo Correa"
            },
            {
                "operatorId": "ccad3b40-c227-425e-b3b1-feedf6cfac2e",
                "name": "Catarina Silva"
            },
            {
                "operatorId": "68781a7b-ac4c-4a85-9f93-36dc5d65d1af",
                "name": "José da Silva"
            }
        ]
    ],

好的，我的 API 正在运行。组件是

import { Component, OnInit } from '@angular/core';
import { OperatorService } from '../operator.service';
import { Operation, Itens } from '../model/operators/operations';

export interface getOperator{
  Id: string;
  Name: string;
}

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css'],
  providers: [OperatorService]
})

export class OperatorsComponent implements OnInit {

   displayedColumns: string[] = ['codigo', 'nome'];

    public message: string;
    public dataSource: Itens[];

    constructor( private _operService: OperatorService) 
    {}    

  ngOnInit() {

  this._operService
      .getAll<Operation>()
      .subscribe((data: Operation) => {
        debugger;
        this.dataSource = data.itens;
      });
  }
}

是谁？这是我的课程

export class Operation{
    error: boolean;
    itens: Array<Itens>;
    message: string;
}

export class Itens{
    objectId: string;
    name: string;
}

和我的服务

    import { Injectable } from '@angular/core';

    import { HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
    import { Observable } from 'rxjs';

    import { Configuration } from './app.constants';

    @Injectable({
      providedIn: 'root'
    })
    export class OperatorService {

      private actionUrl: string;

        constructor(private http: HttpClient, private _configuration: Configuration) {
            this.actionUrl = _configuration.ServerWithApiUrl + 'Operators/';
        }

        public getAll<T>(): Observable<T> {
          return this.http.get<T>(this.actionUrl);
      }

      public getSingle<T>(id: number): Observable<T> {
          return this.http.get<T>(this.actionUrl + id);
      }

      public add<T>(itemName: string): Observable<T> {
          const toAdd = JSON.stringify({ ItemName: itemName });

          return this.http.post<T>(this.actionUrl, toAdd);
      }

      public update<T>(id: number, itemToUpdate: any): Observable<T> {
          return this.http
              .put<T>(this.actionUrl + id, JSON.stringify(itemToUpdate));
      }

      public delete<T>(id: number): Observable<T> {
          return this.http.delete<T>(this.actionUrl + id);
      }
    }

@Injectable()
export class CustomInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        console.log(JSON.stringify(req.headers));
        return next.handle(req);
    }
}

这是断点的结果。我有价值

我的 data.itens 返回值，但是我的 mat-table 为空或为空。我在做什么错了？

PS 在这里，我没有解决问题：mat-table can't bind dataSource 我点击了此链接Using a static array as datasource for mat-table，但没有解决此问题。

我怀疑此线程是否重复并且我禁止，但是我得到的所有答案都无法解决我的问题，因此我为此问题创建了一个新线程。

EDIT1

我遵循了Antoniossss发布的示例，并且代码（组件）是这种方式

import { MatTableDataSource } from '@angular/material/table';

export interface getOperator{
  Id: string;
  Name: string;
}

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css'],
  providers: [OperatorService]
})

export class OperatorsComponent implements OnInit {

   displayedColumns: string[] = ['codigo', 'nome'];

    public message: string;
    //public dataSource: Itens[];
    public dataSource=new MatTableDataSource<Itens[]>();

    constructor( private _operService: OperatorService) 
    {}    

  ngOnInit() {

  this._operService
      .getAll<Operation>()
      .subscribe((data: Operation) => {
        debugger;
        this.dataSource.data = data.itens;
      });
  }
}

这是错误：

[ts]类型'Itens []'不能分配给类型'Itens [] []'。类型 'Itens'不可分配给'Itens []'类型。类型“强度”中缺少属性“包含”。（属性）OperatorsComponent.dataSource：MatTableDataSource

Answer 1

我会

public dataSource=new MatTableDataSource<Itens>;

以及以后的

  this._operService
      .getAll<Operation>()
      .subscribe((data: Operation) => {
        this.dataSource.data = data.itens;
      });

使用这些类似代码段的表从来没有问题。

Answer 2

我这样解决了。从API返回的json错误。另一个 Array 内部有一个 Array ，如下所示：

"itens": [
        [
            {
                "operatorId": "819ee9cc-70b6-44dc-b9e8-afff8705142c",
                "name": "Paulo Correa"
            },
            {
                "operatorId": "ccad3b40-c227-425e-b3b1-feedf6cfac2e",
                "name": "Catarina Silva"
            },
            {
                "operatorId": "68781a7b-ac4c-4a85-9f93-36dc5d65d1af",
                "name": "José da Silva"
            }
        ]
    ],

因此创建api的朋友对其进行了修改。现在，我用来自api的数据填充 mat-table 。我正在回答关闭这篇文章。

mat-table不会从api加载值。 Api工作正常

2 个答案: