angular - Angular 中支持对象不同错误

Question

我正在开发一个 Angular 应用程序，我想在我的 UI 中从主组件显示过滤后的数据列表。

使用过滤功能后，我想以与原始数据类似的方式存储过滤后的数据，但我无法这样做。

但是我得到了，

"Cannot find a differ supporting object '[object Object]' of type 'Shubham Bhatt'. NgFor only supports binding to Iterables such as Arrays.

我希望filteredEmpData 与empData 具有相同的类型。

我上网找到了一个将对象转换为数组的解决方案，但是还有其他方法吗，我可以做到这一点。

P.S:这里绝对是菜鸟。

这是我到目前为止所做的，

    export class AppComponent {
  // tslint:disable-next-line:no-inferrable-types
  title: string = 'Birthday App';
  tDate: any = new Date();
  tMonth: number = this.tDate.getMonth() + 1;
  tDay: number = this.tDate.getDate();
  empData: IEmpdatatype[] = [
  {
    'name': 'Anurag Basu',
    'DOB': '1996-09-10',
    'email': '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ae8fbf4fef5f7fff7fbf3f6dafdf7fbf3f6b4f9f5f7" rel="noreferrer noopener nofollow">[email protected]</a>',
    'imageLink': 'https://qph.fs.quoracdn.net/main-thumb-314460666-200-repbvxtqtsknkwpbemcejkxjnplkcmip.jpeg'
  },
  {
    'name': 'Shubham Bhatt',
    'DOB': '1996-06-26',
    'email': '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5869a989087949b919a989098949c99b59298949c99db969a98" rel="noreferrer noopener nofollow">[email protected]</a>',
    'imageLink': 'https://qph.fs.quoracdn.net/main-thumb-314460666-200-repbvxtqtsknkwpbemcejkxjnplkcmip.jpeg'
  }
];
filteredEmpData: IEmpdatatype = this.check();
check(): IEmpdatatype {
    // console.log(typeof(this.empData));
    // tslint:disable-next-line:prefer-const
    let monthStr: string = this.tMonth.toString();
    let dayStr: string = this.tDay.toString();
    if ( monthStr.length === 1 ) {
      monthStr = '0' + monthStr;
    }
    if ( dayStr.length === 1) {
      dayStr = '0' + dayStr;
    }
    for (let i = 0; i < this.empData.length; i++) {
      const DOBsplit: string[] = this.empData[i].DOB.split('-');
      if ( DOBsplit[1] === monthStr && DOBsplit[2] === dayStr) {
        this.filteredEmpData = this.empData[i];
      }
    }
    console.log(this.filteredEmpData);
    return this.filteredEmpData;
  }
}

App.component.html

<div class="thisMonth">
    <ul *ngFor='let filteredEmpD of filteredEmpData'>
      <li><span><img [src]='filteredEmpD.imageLink' id="img-round"></span><span>{{filteredEmpD.name}}</span><span>{{filteredEmpD.DOB}}</span><span><a type="button" href="mailto:{{filteredEmpD.email}}?Subject=Happy%20Birthday">Wishes</a></span></li>
    </ul>
  </div>

Answer 1

在您的方法 check 中，您正在修改 this.filteredEmpData。您将其设置为 empData 属性的特定索引，而不是推送到它(即，最后，filteredEmpData 的类型为 IEmpdatatype ，而不是IEmpdatatype[])

以下是 check 方法的建议重构:

check(): IEmpdatatype[] {
    const res: IEmpdatatype[] = [];
    let monthStr: string = this.tMonth.toString();
    let dayStr: string = this.tDay.toString();
    if ( monthStr.length === 1 ) {
      monthStr = '0' + monthStr;
    }
    if ( dayStr.length === 1) {
      dayStr = '0' + dayStr;
    }
    for (let i = 0; i < this.empData.length; i++) {
      const DOBsplit: string[] = this.empData[i].DOB.split('-');
      if ( DOBsplit[1] === monthStr && DOBsplit[2] === dayStr) {
        // Push match to result
        res.push(this.empData[i]);
      }
    }
    console.log(res);
    return res;
  }
}