類型 [] 上不存在屬性

Question

我嘗試編譯我的 PWA，並且在 ionic-serve 上的 localhost 上一切正常，但是當我嘗試編譯時，我在 dev = [] 上遇到了類型錯誤。 這是我在 device.page.ts 上的代碼

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Storage } from '@ionic/storage-angular';
import { ApiService } from '../api.service';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';




@Component({
  selector: 'app-device',
  templateUrl: './device.page.html',
  styleUrls: ['./device.page.scss'],
})
export class DevicePage implements OnInit {
  id: any;
  dev = [];
  data: any;
  parse: any;
  constructor(private activatedRoute:ActivatedRoute, public http:HttpClient, private storage: Storage, private api: ApiService, public menuCtrl: MenuController,
    ) {
    this.id = this.activatedRoute.snapshot.paramMap.get('id');  
  }


  ngOnInit() {
  }

  ionViewDidEnter() {
    this.api.getDeviceInfo(this.id).subscribe((response) => {
      console.log(response);
      this.dev = response;
    })
  }

  deleteDevice(id){
    alert(id);
  }

  ionViewWillEnter() {
    this.menuCtrl.enable(true);
  }
}

這是 api 服務中的 function ：

    getDeviceInfo(id): Observable<Device[]> {
    return this.http.get<Device[]>(`${this.apiURL}/get-devices-info?id=` + id)
      .pipe(
        tap(device => console.log('Device retrieved!')),
        catchError(this.handleError<Device[]>('Get user', []))
      );
  }

      private handleError<T>(operation = 'operation', result?: T) {
        return (error: any): Observable<T> => {
          console.error(error);
          console.log(`${operation} failed: ${error.message}`);
          return of(result as T);
        };
      }  

這是我的頁面：

    <ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    
    <ion-title>{{ dev.name }} </ion-title>
    <ion-button  (click)='deleteDevice(dev.id)'>Elimina</ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>
  <img src="/assets/images/{{ dev.img }}" style="width: 50%" >
  <ion-list>
    <ion-item>
      <ion-label>
        Stati e Messaggi dispositivo
      </ion-label>
    </ion-item>
    <ion-item  *ngFor="let message of dev.messages">
      <ion-label class="ion-text-wrap">
        <ion-text color="primary">
          <h3>{{ message.created_at}}</h3>
        </ion-text>
        <p>{{ message.data }}</p>
        <ion-text color="secondary">
          <p>{{ message.sequence }}</p>
        </ion-text>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

它正在本地主機上工作。 當我嘗試編譯時出現錯誤：

Error: src/app/device/device.page.html:21:43 - error TS2339: Property 'messages' does not exist on type '{}'.

有人可以幫我理解嗎？

Answer 1

您的dev class 屬性已初始化為空數組= [] ，您正在嘗試從dev數組訪問messages屬性...

另外，我強烈建議（為了您自己的利益）停止使用any數據類型並開始創建自己的數據類型，否則您最終將在 typescript 中擁有一個普通的typescript項目......

Answer 2

我知道，使用接口會更好。 但是對於那些仍然堅持這一點的人，我發現了錯誤：您需要使用 dev['name'] 而不是 dev.name。