Angular наблюдаемые извлечения данных с помощью подписки - PullRequest
Новая
       11

Angular наблюдаемые извлечения данных с помощью подписки

0 голосов
/ 09 марта 2020

enter image description here 

onFetchData() {
this.http
  .get('https://financialmodelingprep.com/api/v3/company/stock/list')
  .pipe(
    map((respData) => {
      console.log('respData : ', respData);
  }))
  .subscribe(item => {

  });
}

Нужна помощь в попытке получить имя свойства из API, который я звонил выше, я использую angular в первый раз. Нужно вернуть объект, чтобы я мог получить доступ к таким свойствам, как имя или обмен.

Ответы [ 2 ]

2 голосов
/ 09 марта 2020

Во-первых, я бы посоветовал вам создать интерфейсы для ваших моделей данных. Они не должны совпадать с тем, что возвращает ваш API, но в вашем случае это имеет смысл, поскольку ответ API имеет правильное имя. 

export interface Stock {
  name: string;
  exchange: string;
}

Создайте службу, которая будет выполнять вызовы API. Служба не вызовет сам запрос http, она просто вернет наблюдаемый. Служба знает , как она собирается совершить вызов, а компонент знает , когда должен быть выполнен вызов.

stock.service.ts 

fetchData(): Observable<Stock[]> {
  return this.http
    .get('https://financialmodelingprep.com/api/v3/company/stock/list')
    .pipe(
      map((response: any) => response.symbolsList)
    );
}

Внедрить сервис в ваш компонент и вызывать вызов, когда вы захотите. Установите свойство publi c, чтобы ваш HTML мог его «увидеть».

component.ts 

export class MyComponent {
  constructor(private stockService: StockService) { }
  stocks: Stock[];

  onFetchData() {
    this.stockService.fetchData().subscribe((stocks: Stock[]) => {
      this.stocks = stocks;
    });
  }
}

Затем привяжите к данным в вашем HTML:

компонент. html

<div *ngFor="let stock of stocks">
  {{stock.name}}: {{stock.exchange}}
</div>

DEMO: https://stackblitz.com/edit/angular-waymkr

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

Вы ничего не возвращаете в функции map, поэтому вы не можете получить никаких данных.

Не использовать map. Тогда вы получите объект, обладающий свойством symbolsList. 

onFetchData() {
  this.http
    .get('https://financialmodelingprep.com/api/v3/company/stock/list')
    .subscribe(item => {
        console.log('respData : ', item);
    });
}
...