Как отобразить ответ API в пользовательском типе в Angular 5 - PullRequest
Новая
       22

Как отобразить ответ API в пользовательском типе в Angular 5

0 голосов
/ 04 сентября 2018

У меня есть этот интерфейс для формирования моего ответа API - 

 interface MyTest {
 property2: string
 }

Это мой код обслуживания Angular 5 - 

getAPI(searchKey: string) {
this.productsAPIUrl = 
                  https://localhost:44331/api/SampleData/WeatherForecasts2";

return this.http.get<MyTest>(this.productsAPIUrl);
}

Мой фактический ответ API - https://localhost:44331/api/SampleData/WeatherForecasts2 - 

{"property1":"Property1","property2":"Property2","property3":"Property3"}

Теперь я вызываю эту угловую службу в моем компоненте, как показано ниже - 

public incrementCounter() {

this.getAutocompleteSuggestions().subscribe((data: MyTest) => {
  console.log(data);
});
}

Итак, вот мой вопрос: после звонка в Angular Service я получаю полный ответ. Но здесь я приведу свой ответ API как Тип 'MyTest', который имеет только свойство2, но все же ПОЧЕМУ Я ПОЛУЧАЮ ВЕСЬ ОТВЕТ?

КАК СКАЧАТЬ МОЙ Ответ API в подмножестве? Как извлечь ответ API и как MAP его к моей пользовательской модели типа MyTest ????

Мне нужен только Property2. Так как я могу отобразить это ???

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

TypeScript компилируется в JavaScript, поэтому во время выполнения нет смысла для всех типов, добавленных с использованием TypeScript.

Что вы можете сделать, так это сопоставить полученный объект с другим объектом, подобным этому ( stackblitz ): 

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

interface MyTest {
  property2: string
}

class Example {
  private getAutocompleteSuggestions() {
    return from([{"property1":"Property1","property2":"Property2","property3":"Property3"}]);
  }

  public incrementCounter() {
    this.getAutocompleteSuggestions().pipe(map(data => { return { property2: data.property2}})).subscribe((data: MyTest) => {
      console.log(data);
    });
  }
}

new Example().incrementCounter();
0 голосов
/ 04 сентября 2018

Потому что его TS - нет такого понятия, как приведение во время выполнения. Вы только подсказываете компилятору TS, как создать угрозу данному объекту. В случае 

this.getAutocompleteSuggestions().subscribe((data: MyTest)

Вы буквально говорите: «Возьмите аргумент подписки, и обработайте его так, как если бы он был MyTest , таким образом, вы получаете реальный объект, поскольку он никогда не будет такого типа (простой объект) .

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

...