Angular 错误：属性'；标题'；不存在于类型'；英雄[]和#x27；

当我尝试

“ng build--prod”

时，我的应用程序显示以下错误：

src/app/app.component.html（1,7）中出错：类型“Hero[]”上不存在属性“title”

但是我对

“nodemon”

和

“ng-serve”

和

“ng-build”

我只对

“ng build--prod”

有问题

app.component.html

<router-outlet>
    {{ heroes?.title }}
</router-outlet>

import { Component, OnInit } from "@angular/core"
import { Hero, ConfigService } from "src/app/services/config/config.service"

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class GoldHomeContentComponent implements OnInit {
    heroes: Hero[]
    error: any

    constructor(private configService: ConfigService) {}

    getHeroes(): void {
        this.configService.getHeroes().subscribe(
            heroes => (this.heroes = heroes) ,
            error => (this.error = error)
        )
    }

    ngOnInit() {
        this.getHeroes()
    }
}

import { Injectable } from "@angular/core"
import { HttpClient , HttpHeaders  } from "@angular/common/http"
import { Observable } from "rxjs"

export interface Hero {
    title: string
}

const httpOptions = {
    headers: new HttpHeaders({
        "Content-Type": "application/json"
    })
}

@Injectable({
    providedIn: "root"
})
export class ConfigService {
    heroesUrl = "/assets/data/config.json"

    constructor(private http: HttpClient) {}

    getHeroes(): Observable<Hero[]> {
        return this.http.get<Hero[]>(this.heroesUrl, httpOptions)
    }
}

{
    "title": "John Doe"
}

config.service.ts

<router-outlet>
    {{ heroes?.title }}
</router-outlet>

import { Component, OnInit } from "@angular/core"
import { Hero, ConfigService } from "src/app/services/config/config.service"

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class GoldHomeContentComponent implements OnInit {
    heroes: Hero[]
    error: any

    constructor(private configService: ConfigService) {}

    getHeroes(): void {
        this.configService.getHeroes().subscribe(
            heroes => (this.heroes = heroes) ,
            error => (this.error = error)
        )
    }

    ngOnInit() {
        this.getHeroes()
    }
}

import { Injectable } from "@angular/core"
import { HttpClient , HttpHeaders  } from "@angular/common/http"
import { Observable } from "rxjs"

export interface Hero {
    title: string
}

const httpOptions = {
    headers: new HttpHeaders({
        "Content-Type": "application/json"
    })
}

@Injectable({
    providedIn: "root"
})
export class ConfigService {
    heroesUrl = "/assets/data/config.json"

    constructor(private http: HttpClient) {}

    getHeroes(): Observable<Hero[]> {
        return this.http.get<Hero[]>(this.heroesUrl, httpOptions)
    }
}

{
    "title": "John Doe"
}

[更新] 更改app.component.ts中的getHeroes（）

getHeroes(): void {
    this.configService.getHeroes().subscribe((data:any)=>{
        this.heroes = [data]
        // console.log(this.heroes = [data])
    })
}

---

根据代码，英雄看起来像一个数组，您需要来迭代元素

<li *ngFor="let hero of heroes">
   {{ hero?.title }}
</li>

如果您只想绑定对象，请将代码更改为

heroes: Hero;

---

rest应该可以正常工作

根据代码，英雄看起来像一个数组，您需要使用来迭代元素

<li *ngFor="let hero of heroes">
   {{ hero?.title }}
</li>

如果您只想绑定对象，请将代码更改为

heroes: Hero;

---

rest应该可以正常工作

感谢您的重播，现在我遇到了另一个问题：错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor只支持绑定到数组之类的Iterables。好的，谢谢你，我的工作非常好。但是如果我们的data.json不是[{}]？它意味着数组。是的，我知道，我尝试了json类型的外部API文件，但该数据不是数组，它类似于：{“title”：“test”，…}。我再次出现错误（当我尝试获取对象时），哦，然后执行此操作。heroes=[heroes]感谢您的重播，现在我有另一个问题：错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor只支持绑定到数组之类的Iterables。好的，谢谢你，我的工作非常好。但是如果我们的data.json不是[{}]？它意味着数组。是的，我知道，我尝试了json类型的外部API文件，但该数据不是数组，它类似于：{“title”：“test”，…}。我又犯了一个错误（当我试图获取一个对象时），哦，那么就这样做吧