Question

我正在尝试遍历数组，但是当数组为空时，我收到以下错误

找不到类型为“数字”的其他支持对象“ 1”。 NgFor仅支持绑定到数组等Iterable。

第一次，当数据插入到数组中或说数组不为空时，错误消失了这是屏幕截图

https://ibb.co/gvCy4Cv 然后，当在数组中输入任何数据时，我们也看不到错误，下面也是该错误的屏幕截图

https://ibb.co/0h4G9mM //看到控制台中的最后两个条目

下面是此代码

.component.ts文件

import { Component, OnInit } from '@angular/core';
import { ItemsService } from 'src/app/services/items.service';
import { ProductsService } from 'src/app/services/products.service';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.scss']
})

export class AdminProductsComponent implements OnInit {
  subscription:Subscription
  categories:any[]=[]
  default="Bread"
  constructor(public iservice:ItemsService,private 
  prservice:ProductsService,private router:Router,private 
  route:ActivatedRoute) { }

  ngOnInit() {
    this.subscription=this.prservice.fetchproducts.subscribe(
      (data) => {
        // console.log(data)
        this.categories=data
        console.log(this.categories)
      })
    this.subscription.unsubscribe()
  }

  headElements = ['Title', 'Price', ''];
}

html文件

<button type="button" mdbBtn color="primary" [routerLink]=" . 
['/admin/products/new']" mdbWavesEffect>New Products</button>
<table mdbTable >
<thead >
  <tr>
    <th *ngFor="let head of headElements" scope="col">{{head}} </th>
  </tr>
</thead>
<tbody>
  <tr mdbTableCol *ngFor="let el of categories">
    <td>{{el?.title}}</td>
    <td>{{el?.price}}</td>
  </tr>
</tbody>
</table>

Answer 1

使用*ngIf="categories && categories.length>0"来避免此错误

<button type="button" mdbBtn color="primary" [routerLink]=" . 
['/admin/products/new']" mdbWavesEffect>New Products</button>
<table mdbTable >
<thead >
  <tr>
    <th *ngFor="let head of headElements" scope="col">{{head}} </th>
  </tr>
</thead>
<tbody *ngIf="categories && categories.length>0">
  <tr mdbTableCol *ngFor="let el of categories">
    <td>{{el?.title}}</td>
    <td>{{el?.price}}</td>
  </tr>
</tbody>
</table>

Answer 2

错误

找不到类型为“数字”的其他支持对象“ 1”。 NgFor仅支持绑定到数组等Iterable。

第23行的第一个控制台日志告诉您正在发生的事情。

以某种方式为变量类别分配类型为“ 数字”的1，最好在分配数据之前首先检查数据是否为数组，或者仅将可观察到的“ prservice.fetchproducts”更新为总是返回一个数组

this.subscription = this.prservice.fetchproducts
  .subscribe((data) => {
    if(Array.isArray(data)) { 
      this.categories=data
      console.log(this.categories)
    }
  });

找不到类型为“数字”的其他支持对象“ 1”。 NgFor仅支持绑定到数组等可迭代对象

2 个答案: