如何在Angular中从ID显示JSON对象（七）

Posted 2023-03-13

【中文标题】如何在Angular中从ID显示JSON对象（七）

【英文标题】：How to display JSON object from ID in Angular (7)

【发布时间】：2019-10-29 00:21:51

【问题描述】：

我正在尝试创建一个有点像博客的 CRUD 应用程序。我的所有创建、读取、更新和删除功能都在工作。我只想显示一个对象的数据 （例如：标题，描述） 基于作为路径一部分的对象的 ID (localhost:4200/route/0).

我可以使用<input [(ngModel)]"articles.title"> 以我想要的方式显示数据，但不能在<h1> 或任何其他标签上使用ngFor。

app-routing-module.ts

 path: 'article/:id', component: ArticleComponent

db.json

"articleInfo": [
    
      "id": 0,
      "title": "Marinara Pasta",
      "category": "Italian",
      "author": "Sample",
      "date": "06/11/2019",
      "description": "A classic Italian dish. Quick, easy, and ready to eat in only 15 minutes.",
      "image": "/assets/sample.png"
    
]

data.service.ts

baseUrl:string = "http://localhost:3000";

getData(id: number): Observable<Data> 
  return this.http.get<Data>(this.baseUrl + '/articleInfo/' + id)

article.component.ts

export class ArticleComponent implements OnInit 

  id = this.actRoute.snapshot.params['id'];
  articles: any = [];

  constructor(private dataService: DataService, public actRoute: ActivatedRoute, public router: Router)  
  loadIdData() 
    return this.dataService.getData(this.id).subscribe(data => 
      this.articles = data;
    )
  

  ngOnInit() 
    this.loadIdData();
  

article.component.html

<div *ngFor="let info of articles">
      <h2> info.title </h2>
      <h6> info.description</h6>
</div>

我在 ArticleComponent.ngfactory.js 中得到 ERROR 和 ERROR CONTEXT。

【参考方案1】：

您可以将您的 article.component.ts 更新为：

export class ArticleComponent implements OnInit 
  id;
  articles: Observable<any[]>;

  constructor(private dataService: DataService, public actRoute: ActivatedRoute, public router: Router)  

  ngOnInit() 
    this.id = this.actRoute.snapshot.params['id']
    this.loadIdData();
  

  loadIdData() 
    this.articles = this.dataService.getData(this.id);
  

和 article.component.html 到：

<div *ngFor="let info of articles | async">
  <h2> info.title </h2>
  <h6> info.description</h6>
</div>

问题似乎与您声明 id 属性的方式有关 - actRoute 仅在 constructor 运行后定义，这发生在访问类的属性之后。 因此，当您的 loadIdData 函数运行时，this.id 可能是未定义的。欲了解更多信息，请参阅Angular Lifecycle Docs

注意：| async 只是一些糖，并不是真正需要的。您可以保留您的代码，只需更新constructor 或ngOnInit 中的id 值。 这是article explaining the async pipe

【讨论】：

您好，感谢您的回复。不幸的是，这并没有解决我的问题。在我的原始代码中，我可以使用<input [(ngModel)]="articles.title"> 显示正确的数据。您更新的代码没有显示任何带有 ngFor 或 ngModel 的内容。问题可能是别的吗？

【参考方案2】：

弄清楚我哪里出错了。 ngFor 不是显示一组数据的正确方式。它需要多个集合，因此不会在页面上显示任何内容。对我有用的是从我的article.component.ts 中的articles: any = []; 中提取信息，如下所示：

<h1> articles.id </h1>
<h2> articles.title </h2>
<h6> articles.description </h6>

如需更好地解释此功能的原因，请参阅angular.io documentation on displaying data。