Отображение JSON в виде списка в Angular 7

Question

Я хочу отобразить список данных (полученных в формате JSON), но похоже, что я что-то упустил, и данные не отображаются.Вот мой код:

Сервис:

 getData() {
    this.http.post('http://localhost/api/Acc/GetData', "").subscribe(res => {
    return res;
   });
 }

Компонент:

  constructor(private api: ApiService) {
     var data = api.getData();   
  }

Шаблон:

<mat-list>
<mat-list-item *ngFor="let item of data">
<h4 matLine> {{item.Field1}} </h4>
</mat-list-item>
</mat-list>

Есть некоторые слабые места, которые я могусм .:

1. Я не уверен, использует ли getData правильный способ возврата данных

2. Я не уверен, правильно ли хранится конструкторданные, но я попробовал некоторые другие варианты, и ничего не помогло.

Answer 1

Ваш метод getData() должен возвращать Observable, потому что выборка данных асинхронна.

В вашем компоненте вы можете подписаться на это Observable и отображать данные, если вы их получите.

@Component({
  selector: 'app-some-data',
  templateUrl: './some-data.component.html',
  styleUrls: ['./some-data.component.css']
})
export class SomeDataComponent implements OnInit {
  data: any[];

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.api.getData().subscribe(data => this.data = data);
  }
}

<div>
  <div *ngFor="let item of data">{{item | json}}</div>
</div>

@Injectable({
  providedIn: 'root',
})
export class ApiService {

  // constructor, etc.

  getData(): Observable<any[]> {
    return this.http.post<any[]>('http://localhost/api/Acc/GetData', "");
  }
}

Вы также можете подписаться на наблюдаемое в html через канал async.

@Component({
  selector: 'app-some-data',
  templateUrl: './some-data.component.html',
  styleUrls: ['./some-data.component.css']
})
export class SomeDataComponent implements OnInit {
  data: Observable<any[]>;

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.data = this.api.getData();
  }
}

<div *ngIf="(data | async) as items">
  <div *ngFor="let item of items">{{item | json}}</div>
</div>

Answer 2

В туре Angular's Tour of Heroes предлагается один из способов получения списка объектов с сервера в разделе 6, HTTP - Получить героев с HTTPClient:

/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
}

Остальная часть урока (https://angular.io/tutorial) предоставляет контекст для того, как импортировать необходимые модули для выполнения вашей задачи.