ng не отображается, когда в массиве возвращается только 1 элемент - PullRequest
Новая
       7

ng не отображается, когда в массиве возвращается только 1 элемент

1 голос
/ 26 марта 2020

У меня есть json массив , который я собираю из вызова REST API, выглядит следующим образом: 

[ 
    {"id":1,"title":"Title One","author":"Auth One"},
    {"id":2,"title":"Title Two","author":"Auth Two"},
    {"id":3,"title":"Another Title","author":"Another author"}
]

Я создал класс posts.model.ts для представления того, из чего состоит сообщение: 

export class Post {
    id: Number;
    title: string;
    author: string;
}

Мой view-component.component. html (я знаю ужасное имя, извините) выглядит следующим образом: 

<p>
    Post ID:<br>
    <input type="text" [(ngModel)]="id">
</p>
<p>
    <button (click)="search()">Search</button>
</p>
<div *ngIf="PostList">
    <div *ngFor="let post of PostList">
        Post ID: {{post.id}}<br>
        Post Title: {{post.title}}<br>
        Post Author: {{post.author}}
        <hr>
    </div>
</div>

и мой view-component.component.ts вот так 

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from './post.model';

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

  @Input('post') post: Post;
  id: string = "";
  PostList: any = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void { }

  search() {
    this.http.get('http://localhost:3000/posts/' + this.id)
    .subscribe((data: {}) => {
      this.PostList = data;
      console.log("This is what I got back = " + JSON.stringify(data));
    })
  }

}

Что я заметил, так это то, что когда я нажимаю кнопку с пустым полем ввода (Я хочу, чтобы все сообщения были возвращены (это работает, как и ожидалось, и я получаю полный список всех сообщений)).

Однако, когда я ввожу, например, число «2» в поле ввода и нажму кнопку, я ожидаю увидеть только 2-й пост («Заголовок второй» и «Второй подлинник»), однако ничего не отображается.

Как вы можете видеть в файле ".ts", я записываю на консоль строку, которую возвращаю в функции search (). При поиске 2-го поста я получаю следующее:

This is what I got back = {"id":2,"title":"Title Two","author":"Auth Two"}

Однако на странице html ничего не отображается.

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Вот как я бы это реализовал:

  • Я бы использовал interface вместо class, например, 

    export interface Post {
    id: Number;
    title: string;
    author: string;
}

  • Затем я использовал бы созданный интерфейс в объявлении массива PostList: Post[]; и оставил бы его неопределенным, чтобы <div *ngIf='PostList'> работал, потому что проверка будет ложной, если массив не определен.

  • Я бы также использовал интерфейс при вызове API this.http.get<Post[]> и использовал его снова при получении данных от API .subscribe((data: Post[]) => 

    this.http.get<Post[]>('http://localhost:3000/posts/' + this.id)
    .subscribe((data: Post[]) => {
      this.PostList = data;
      console.log("This is what I got back = " + JSON.stringify(data));
    })

Пожалуйста, не стесняйтесь чтобы связаться со мной для дальнейшей помощи, если это необходимо.

1 голос
/ 26 марта 2020

Прямо сейчас вы возвращаете object. Вам нужно вернуть array с 1 элементом с вашего бэкенда:

[{"id":2,"title":"Title Two","author":"Auth Two"}]

...