ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

2019-03-04 置頂文章

1449
0
angualr7

{
    "FactoryArea": "Hsinchu",
    "Function": [
        {
            "Classification": "人",
            "Option": [
                {
                    "Name": "candy",
                    "Topic": "Json/Hsinchu/candy"
                }
    
            ]
        }
    ]
}

目前的資料 typeof 是"object"
要抓取的是FactoryArea這筆資料

程式碼如下

app.component.ts

constructor( private mqttServiceData: MqttService) { }  
ngOnInit() {
  this.mqttServiceData.getUsers().subscribe(
    (data) => {
      this.mqttData = data;
      console.log(this.mqttData);
    });
 }

app.component.html

<mat-form-field class="nav navbar-nav ml-auto mr-3 select-factory-area">
    <mat-select class="mat-select" placeholder="選擇廠區">
        <mat-option *ngFor="let mqttDatas of mqttData" [value]="mqttDatas.FactoryArea">
         {{mqttDatas.FactoryArea}}
        </mat-option>
   </mat-select>
</mat-form-field>

錯誤訊息如下

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我如何解決這個問題?

從錯誤中找關鍵詞 NgFor only supports binding to Iterables such as Arrays.

代表NgFor只支持Array 不能是object

修正 modify app.component.ts

給data [ ]

import { MqttService } from '../mqtt.service';

export class AppComponent implements OnInit {
 mqttData: Object;

 constructor( private mqttServiceData: MqttService) { }  
  ngOnInit() {
    this.mqttServiceData.getUsers().subscribe(
      (data) => {
        this.mqttData = [data];
        console.log(this.mqttData);
      });
   }
}

這樣就可以囉^^~

回首頁