Angular 屬性在“對象”類型上不存在

Question

我在使用 Angular 時遇到了一些問題。

我正在嘗試遍歷 JSON Api 但我收到消息“屬性在類型'對象'上不存在。

不完全是，錯誤是“'Project'類型上不存在屬性'sprints'”

我有這個HTML 模板：

<mat-toolbar>
    <span>{{ currentProject.title }}</span>
</mat-toolbar>
<div class="data-panel">
  <mat-card>
    <mat-toolbar style="border-radius: 4px 4px 0px 0px;">
              <span>Development</span>
          </mat-toolbar>
          <mat-card-content>
            <span>Access Code: {{ currentProject.accessCode }}</span>
            <div *ngFor="let sprint of currentProject.sprints">  <---- THIS IS WERE THE ERROR HAPPENS
              <span>{{ sprint }}</span>
            </div>
          </mat-card-content>
  </mat-card>
</div>

還有我的JSON ：

{
    "id": 1,
    "title": "App Komputer",
    "description": "Website dedicated to computer related products",
    "accessCode": "5128",
    "createdAt": "2022-01-13T21:19:11.000Z",
    "updatedAt": "2022-01-13T21:19:16.000Z",
    "sprints": [{
        "id": 1,
        "title": "Sprint 1",
        "releaseDate": "2022-01-20T21:37:13.000Z",
        "description": "Specs up to 01/22/2022",
        "createdAt": "2022-01-13T21:37:58.000Z",
        "updatedAt": "2021-12-13T01:46:36.000Z",
        "projectId": 1,
        "specifications": [{
            "id": 1,
            "title": "Add product button",
            "description": "New product button HTML",
            "duration": 10,
            "status": 1,
            "createdAt": "2021-12-23T01:46:36.000Z",
            "updatedAt": "2021-12-23T01:46:36.000Z",
            "sprintId": 1
        }]
    }]
}

另外，這是我的組件：

constructor(
    private projectService: ProjectService,
    private route: ActivatedRoute,
    private router: Router,
    private _titleService: Title
    ) { }

  ngOnInit(): void {
    if (!this.viewMode) {
      this.message = '';
      this.getProject(this.route.snapshot.params["id"]);
    }
  }

  getProject(id: string): void {
    this.projectService.get(id)
      .subscribe({
        next: (data) => {
          this.currentProject = data;
          console.log(data);
          this._titleService.setTitle(data.title+' · Scrumy');
        },
        error: (e) => console.error(e)
      });
  }

我該如何解決這個錯誤？ 我嘗試了很多東西，但沒有一個奏效。

謝謝！

---

編輯 2022 年 1 月 22 日

對於那些詢問的人，這里是project-details-component.ts的完整方案，我從這里得到 function：

import { Component, Input, OnInit } from '@angular/core';
import { ProjectService } from 'src/app/services/project.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from 'src/app/models/project.model';
import { Title } from "@angular/platform-browser";
import { Moment } from 'moment';
import { EChartsOption } from 'echarts';

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

  @Input() viewMode = false;

  @Input() currentProject: Project = {
    title: '',
    description: '',
    accessCode: ''
  };
  
  message = '';

  constructor(
    private projectService: ProjectService,
    private route: ActivatedRoute,
    private router: Router,
    private _titleService: Title
    ) { }

  ngOnInit(): void {
    if (!this.viewMode) {
      this.message = '';
      this.getProject(this.route.snapshot.params["id"]);
    }
  }

  getProject(id: string): void {
    this.projectService.get(id)
      .subscribe({
        next: (data) => {
          this.currentProject = data;
          console.log(data);
          this._titleService.setTitle(data.title+' · Scrumy');
        },
        error: (e) => console.error(e)
      });
  }

}

這是項目。model.ts ：

export class Project {
  id?: any;
  title?: string;
  description?: string;
  accessCode?: string;
  createdAt?: Date;
  updatedAt?: Date;
}

Answer 1

你不會也得到title和accessCode屬性的錯誤嗎？ 因為您將同步代碼與異步代碼混合在一起，這通常會導致您面臨的問題。

解釋一下，您的模板期望currentProject立即可用，這是不正確的，因為您從某個服務加載它。 並且取決於您的模板需要多長時間才能從currentProject中提取數據，但它尚未初始化。

如果您不想重寫代碼以使用async pipe，請將整個塊放入*ngIf=",!currentProject", or add question marks before 。

<span>Access Code: {{ currentProject?.accessCode }}</span>
<div *ngFor="let sprint of currentProject?.sprints">
  <span>{{ sprint }}</span>
</div>

Answer 2

比較您的 JSON 數據和Product界面，您錯過了 model 中的sprints屬性。

通過json2ts ，您的Product界面應如下所示：

export interface RootObject {
    id: number;
    title: string;
    description: string;
    accessCode: string;
    createdAt: Date;
    updatedAt: Date;
    sprints: Sprint[];
}

export interface Sprint {
    id: number;
    title: string;
    releaseDate: Date;
    description: string;
    createdAt: Date;
    updatedAt: Date;
    projectId: number;
    specifications: Specification[];
}

export interface Specification {
    id: number;
    title: string;
    description: string;
    duration: number;
    status: number;
    createdAt: Date;
    updatedAt: Date;
    sprintId: number;
}

---

另一個問題是@mat 提到的問題，因為currentProject數據是異步的。 您必須將值初始化為currentProject ：

@Input() currentProject: Project = {
  title: '',
  description: '',
  accessCode: '',
  sprints: []
};

或者，當currentProject為null或undefined時，使用Typescript 可選鏈接 ( ?. )來逃避錯誤。

@Input() currentProject: Project;

<mat-toolbar>
  <span>{{ currentProject?.title }}</span>
</mat-toolbar>
<div class="data-panel">
  <mat-card>
    <mat-toolbar style="border-radius: 4px 4px 0px 0px;">
      <span>Development</span>
    </mat-toolbar>
    <mat-card-content>
      <span>Access Code: {{ currentProject?.accessCode }}</span>
      <div *ngFor="let sprint of currentProject?.sprints">
        <span>{{ sprint | json }}</span>
      </div>
    </mat-card-content>
  </mat-card>
</div>

StackBlitz 上的示例演示