Question

对象内部对象数组的长度运算符

2020-07-13

52

html angular typescript api angular8

我收到来自 API res 的响应，其类型为： {"plan":[{"name":"ABC"},{"name":"DEF"}]> 。我尝试将 res 存储在我的 TypeScript 中，如下所示：

this.apiCall.apiMethod(this.headers, this.data)
  .subscribe(
    async (res: any) => {
      if (res) {
         for (let i = 0; i < res.plan.length; i ++){
         if (i < 3) {
         this.ppp.push(res.plan[i]);
         this.plans = this.ppp;

在我的 HTML 中，我进行如下绑定：

<div class="columns" *ngFor="let p of plans; let i = index">

在我的控制台中，我收到错误：

 TypeError: Cannot read property 'length' of undefined

您能告诉我如何运行 for 循环，然后将对象 res 内的对象数组绑定到 html 吗？

Answer 1

如果编译时没有错误，则很难回答。

您可以尝试使用括号表示法和 ES6 扩展。

    if (res) {
     res["plan"].map((plan, index) => {
       if(index < 3){
         this.ppp = [...this.ppp,res["plan"][index]];
         this.plans = [...this.ppp];
       }

     });
  }

Answer 2

使用方法如下

this.apiCall.apiMethod(this.headers, this.data)
  .subscribe(
    async (res: any) => {
      if (res && res.plan && res.plan.length) {
         for (let i = 0; i < res.plan.length; i ++){
         if (i < 3) {
         this.ppp.push(res.plan[i]);
         this.plans = this.ppp;

Answer 3

如果代码编译时没有任何错误，那么很可能是 TS Lint 错误。您可以使用类/接口定义类型，或者使用括号表示法而不是点表示法来访问属性。有关 JS 属性访问器的更多信息，请参见此处。

尝试以下操作

for (let i = 0; i < res['plan'].length; i ++) {
  ...
}

更新：接口

或者，您可以定义一个接口来断言类型。

export interface Name {
  name: string;
}

export interface Plan {
  plan: Name[];
}

并定义 specific 而不是 any 。

this.apiCall.apiMethod(this.headers, this.data)
  .subscribe(
    async (res: Plan) => {       // <-- use `Plan` instead of `any` here
      if (res) {
         for (let i = 0; i < res['plan']length; i ++) {
           ...

如果您的属性比问题中提到的多，则需要将对象中所有可能的属性都包含到接口中。