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

Posted 2023-02-26

【中文标题】mat-table 不会从 api 加载值。 Api 工作正常

【英文标题】：mat-table doesn't load values from api. Api is working fine

【发布时间】：2018-12-18 14:48:18

【问题描述】：

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

我没有用我的代码填充 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>

当我在 Postman 中运行我的 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;
      );
  

谁是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 返回值，但我的 ma​​t-table 为 null 或为空。我做错了什么？

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

我怀疑这个帖子是否重复并且我被ban，但我得到的所有答案都没有解决我的问题，所以我创建了一个关于这个问题的新帖子。

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[]'。 'Itens' 类型中缺少属性 'includes'。 (属性) OperatorsComponent.dataSource: MatTableDataSource

【问题讨论】：

我的工作台给你：stackblitz.com/edit/…

@Preston，我试着像你发布的那样做（使用我的 api），但仍然存在同样的问题。我在控制台（Chrome）中没有收到错误，但我的表（mat-table）是空的。似乎缺少了什么，但我不知道是什么。

这一行：.getAll<Operation>() 是正确的吗？我使用类型 Operation 而不是 any。好吗？

用模型打字应该可以。不确定您是否应该在public dataSource=new MatTableDataSource<Itens[]>(); 中使用方括号另外，您可以分叉我的 StackBlitz 并一次尝试您的代码，直到您破坏我的代码。

我尝试了使用和不使用括号，但问题仍然存在。我没有收到错误，但没有填满我的表格。将用我的价值观（API）做你的完整例子。

【参考方案1】：

我是这样解决的。 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 的数据填充我的 ma​​t-table。我正在回答关闭这篇文章。

【参考方案2】：

我愿意

public dataSource=new MatTableDataSource<Itens>;

以后

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

使用这种类似的 sn-ps 的表从未遇到过问题。