尝试与'[object Object]'进行比较时出错。仅允许数组和可迭代。虽然有一个数组给迭代

时间:2018-08-20 15:19:52

标签: arrays json typescript iterator angular6

我有一个运行良好的Angular应用程序,但是google控制台中仍然存在重复出现的错误:

my error when running the app

我想我对某些内容进行了错误编码。这是我的组件

    import { Component, OnInit } from '@angular/core';
import { TextService } from '../service/text.service';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  me_title:String;
  me_content:Array<Object> = [];
  objectives_title:String;
  objectives_content:Array<Object> = [];
  error = "erreur";
  hobbies:Object = [];
  assets:Object = [];

  constructor(private textService:TextService) { }

  ngOnInit() {
   this.getText(2);
   this.getText(3);
   this.getText(4);
   this.getText(5);
   this.textService.getAssets().subscribe(
     data => this.handleContent(6, data),
   )
   this.textService.getHobbies().subscribe(
     data => this.handleContent(7, data)
   )
  }

  getText(id){
     this.textService.getText(id).subscribe(
      data => this.handleContent(id, data),
      error => console.log(error)
    )

  }

  handleContent(id, data){
    switch(id){
      case 2:
      this.me_title = data.text;
      case 3: 
      this.me_content = data.paraphs;
      console.log(this.me_content)
      case 4:
      this.objectives_title = data.text;
      case 5:
      this.objectives_content = data.paraphs;
      case 6:
      this.assets = data;
      case 7:
      this.hobbies = data;
    }
  }



}

和相关的html:

<div class="container">
  <div class="spacer">
    <p class="fontPacifico_white">
      {{me_title}}
    </p>
    <div *ngFor="let _elem of me_content">
      <p class="paraphs">{{_elem}}</p>
    </div>
  </div>
  <div class="spacer">
      <p class="fontPacifico_white">
          {{objectives_title}}
      </p>
      <div *ngFor="let _elem of objectives_content">
        <p class="paraphs">{{_elem}}</p>
      </div>
  </div>
  <div class="spacer">
    <p class="fontPacifico_white">Mes atouts...</p>
    <table>
      <tr *ngFor="let _elem of assets">
        <td><p style="color:white;" class="paraphs">{{_elem.title}}</p></td>
        <td><p class="paraphs" >{{_elem.text}}</p></td>
      </tr>
    </table>
  </div>
  <div class="spacer">
    <p class="fontPacifico_white">Mes hobbies...</p>
    <div *ngFor="let _elem of hobbies">
      <p class="paraphs">{{_elem.text}}</p>
    </div>
  </div>
</div>

这是我从节点后端和服务获得的json字符串的格式:

{"id":"5","paraphs":["lorem ipsum"," Neque porro quisquam est qui dolorem ipsum quia dolor sit amet"]}

正如我所说的,结果与预期的一样,但想深入了解它并理解为什么此代码很弱,以便Google会警告我这些错误。

据我对打字稿的了解,* ngFor将迭代器与数组let _elem of objectives_content链接在一起,其中_elem是迭代器变量,而Objective_content是该数组。那为什么我的浏览器不这样呢?

0 个答案:

没有答案