Как отобразить объект JSON из ID в Angular (7)

Question

Я пытаюсь создать приложение CRUD, которое работает как блог. У меня есть все функции создания, чтения, обновления и удаления. Я хочу отобразить данные только одного объекта (пример: заголовок, описание) на основе идентификатора объекта, являющегося частью маршрута (localhost: 4200 / route / 0) .

Я могу получить данные для отображения так, как я хочу, используя <input [(ngModel)]"articles.title">, но не используя ngFor для <h1> или любого другого тега.

приложение-маршрутизации 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.

Answer 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 to:

<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. Вот статья , объясняющая асинхронный канал

Answer 2

Разобрался, где я иду не так. ngFor - неправильный способ отображения одного набора данных. Он ожидает несколько наборов и в результате ничего не отображает на странице. Для меня работало получение информации из articles: any = []; в моем article.component.ts примерно так:

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

Более подробное объяснение того, почему это работает, см. В документации angular.io по отображению данных .