键入'xx‘不能指定键入'any[]财政报告’(Iterable<any> & any[]) \x (any[] & Iterable<any>)‘’

Question

我得到了以下错误。我一直试图解决这个问题已经有一段时间了，但没有运气。有人能帮帮我吗。

键入‘学生会’不能指定键入'any[] \ Iterable _Iterable\ (Iterable & any[]) \x (any[] & Iterable)‘’。输入“学生”不能输入'any[] & Iterable‘。输入‘学生会’不能指定键入'any[]‘。

代码可以在这里找到。

app.component.html

<div *ngFor="let stu of studentSelected; let i = index;">
  <tr>
    <td>{{stu.f}} :</td>
    <ng-container *ngFor="let s of stu.ff">
      <td>{{s.s_name}}</td>
    </ng-container>
  </tr>
</div>

app.component.ts

import { Component, VERSION } from '@angular/core';
import { Student } from './student.model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  studentSelected: Student | any = {
    f: 'dfd',
    ff: [
      {
        s_name: 'nswq'
      }
    ]
  };
}

School.model.ts

export class School {
  s_name: string;

  constructor(s_name: string = '') {
    this.s_name = s_name;
  }
}

student.model.ts

import { School } from './School.model';

export class Student {
  f: string;
  ff: School[];

  constructor(f: string = '', ff: [] = []) {
    this.f = f;
    this.ff = ff;
  }
}

Answer 1

正如注释中提到的，selectedStudent是一个对象，因此删除外部ngFor。另外，从代码中删除所有any。如果要使用TypeScript，则用any编写代码是没有用的。因此，删除any并将变量声明为Student的类型。

studentSelected: Student = {
  f: 'dfd',
  ff: [
    {
      s_name: 'nswq'
    }
  ]
};

我看到您正在使用类与构造函数。请注意，您声明studentSelected的方式不会是类的实例。我喜欢使用接口，除非有特定的原因需要一个类，比如类特定的方法。您似乎没有这种功能，所以我建议您只使用接口：

export interface School {
  s_name: string;
}

export interface Student {
  f: string;
  ff: School[];
}

如果您希望将数据作为类，请记住，在创建类的实例时，需要调用new Student({.....})。

至于模板..。如前所述，从模板中删除外部*ngFor：

<tr>
  <td>{{studentSelected.f}} :</td>
  <ng-container *ngFor="let s of studentSelected.ff">
    <td>{{s.s_name}}</td>
  </ng-container>
</tr>

你的StackBlitz