错误表示“错误类型错误:data.slice 不是函数”

我已经研究过一些这样的问题,但它们对我的情况都没有用。我收到一个 obj,它返回包含城市名称、居民和州的城市列表。这是我的http服务请求:

cidadesUrl = 'http://localhost:8080/api/cidades';

  constructor(private http: HttpClient) { }

  listar(): Observable<Cidade[]>{
    return this.http.get<Cidade[]>(this.cidadesUrl);
  }

这是对服务的调用:

  cidades!: Cidade[];

  constructor(private cidadeService:CidadeService) { }

  listar(){
    this.cidadeService.listar().subscribe(data => { this.cidades = data });
    console.log(this.cidades);
  }

和我的html:

<p-table [value]="tabela" [paginator]="true" [rows]="4" responsiveLayout="scroll">
  <ng-template pTemplate="header">
      <tr>
          <th>Nome</th>
          <th>Habitantes</th>
          <th>Estado</th>
          <th>Ações</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-cidade>
      <tr>
          <td>{{cidade.nome}}</td>
          <td>{{cidade.qtdHabitantes | number}}</td>
          <td>{{cidade.estado}}</td>
          <td class="acoes">
            <button pButton icon="pi pi-pencil" pTooltip="Editar" tooltipPosition="top"></button>
            <button pButton class="p-button-danger" icon="pi pi-trash"  pTooltip="Excluir" tooltipPosition="top"></button>
          </td>
      </tr>
  </ng-template>
</p-table>

Tabela 变量:

@Input() tabela: Cidade[] = [];

Cidade类

export class Cidade {

  id!: number;
  nome!: string;
  qtdHabitantes!: number;
  estado!: string;

}

我不知道为什么,但是当页面加载时,我收到错误:

ERROR TypeError: data.slice is not a function
    at Table.get dataToRender [as dataToRender] (primeng-table.mjs:398)
    at Table_table_7_Template (primeng-table.mjs:1840)
    at executeTemplate (core.mjs:9618)
    at refreshView (core.mjs:9484)
    at refreshEmbeddedViews (core.mjs:10609)
    at refreshView (core.mjs:9508)
    at refreshComponent (core.mjs:10655)
    at refreshChildComponents (core.mjs:9280)
    at refreshView (core.mjs:9534)
    at refreshComponent (core.mjs:10655)

当我在控制台中打开“网络”选项卡时,城市在那里,但它们没有出现在表格 [![enter image description here ](https://i.stack.imgur.com/Kmlti.png)中

我不知道什么可能会产生这个错误。希望有人能帮忙

stack overflow Error says that 'ERROR TypeError: data.slice is not a function'
原文答案

答案:

作者头像

保留您的输入类型,如下所示:-

@Input() tabela: {content: Cidade[]};

和模板,如:-

<p-table [value]="$any(tabela)?.content" [paginator]="true" [rows]="4" responsiveLayout="scroll">
  <ng-template pTemplate="header">
      <tr>
          <th>Nome</th>
          <th>Habitantes</th>
          <th>Estado</th>
          <th>Ações</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-cidade>
      <tr>
          <td>{{cidade.nome}}</td>
          <td>{{cidade.qtdHabitantes | number}}</td>
          <td>{{cidade.estado}}</td>
          <td class="acoes">
            <button pButton icon="pi pi-pencil" pTooltip="Editar" tooltipPosition="top"></button>
            <button pButton class="p-button-danger" icon="pi pi-trash"  pTooltip="Excluir" tooltipPosition="top"></button>
          </td>
      </tr>
  </ng-template>
</p-table>

请注意我在模板中的 tabela 之后放置的问号。其他一切都是一样的。

作者头像

我相信这个错误与 undefined 的列表有关:

ERROR TypeError: data.slice is not a function

您需要设置初始状态,可能是这样的:

@Input() tabela!: Cidade[] = [];

感叹号 ! 告诉 TS 假设一个值已经被设置并且它不是 undefined 但这在编译时可能不是一个有效的假设。

作者头像

您可以尝试初始化 tabela 属性,例如

@Input() tabela: Cidade[] = [];

看起来该表正在尝试访问 tabela,但它不是它所期望的那种数据

作者头像

你必须做 data?.content.slice 因为数据的内容是一个数组和你想要运行切片的内容。

作者头像

感谢所有帮助我的人,我设法解决了错误

所以基本上我所做的是:

我的html:

<p-table [value]="tabela" [paginator]="true" [rows]="4" responsiveLayout="scroll">
  <ng-template pTemplate="header">
      <tr>
          <th>Nome</th>
          <th>Habitantes</th>
          <th>Estado</th>
          <th>Ações</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-cidade>
      <tr>
          <td>{{cidade.nome}}</td>
          <td>{{cidade.qtdHabitantes | number}}</td>
          <td>{{cidade.estado}}</td>
          <td class="acoes">
            <button pButton icon="pi pi-pencil" pTooltip="Editar" tooltipPosition="top"></button>
            <button pButton class="p-button-danger" icon="pi pi-trash"  pTooltip="Excluir" tooltipPosition="top"></button>
          </td>
      </tr>
  </ng-template>
</p-table>

服务:(将 Cidade 更改为任何类型)

export class CidadeService {

  cidadesUrl = 'http://localhost:8080/api/cidades';

  constructor(private http: HttpClient) { }

  listar(): Observable<any>{
    return this.http.get<any>(this.cidadesUrl);
  }

  salvar(cidade:Cidade){
    return this.http.post<Cidade>(this.cidadesUrl, cidade);
  }

}

Tabela 组件

export class TabelaCidadesComponent implements OnChanges {

  @Input() tabela: any[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    if(this.tabela){
      const contentKey: any = Object.keys(this.tabela)[0];
      this.tabela = this.tabela[contentKey];
      console.log(this.tabela);
    }
  }

}

相关问题