Блог

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

Ответ API журнала :

m-fin.услуги.ts

Служба для вызова внешнего API.

networth-главная страница.компонент.ts

Пытаюсь зафиксировать ответ в переменной.

networth-home.component.html

 lt;div class = "account"gt;  lt;div class="field is-horizontal"gt;  lt;div class="field-label is-normal"gt;  lt;label class="label"gt;Saving Accountlt;/labelgt;  lt;/divgt;  lt;div class="field-body"gt;  lt;div class="field"gt;  lt;div class="control"gt;  lt;input class="input is-primary" type="text" placeholder= {{pages.account_amount}}gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

Ошибка :

 Error: src/app/networth/networth-home/networth-home.component.html:27:86 - error TS2339: Property 'account_amount' does not exist on type 'string'.  27 lt;input class="input is-primary" type="text" placeholder= {{pages.account_amount}}gt;  ~~~~~~~~~~~~~~   src/app/networth/networth-home/networth-home.component.ts:6:16  6 templateUrl: './networth-home.component.html',  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  Error occurs in the template of component NetworthHomeComponent.  

Вам нужно определить интерфейс для ответа, который вы получаете от API. В настоящее время Typescript определяет тип pages as string с момента его инициализации '' .

Если количество ключей в объекте динамическое, но одного типа (число), вы, вероятно, можете сделать следующее :

 interface PagesItem {  [key: string]: number; }  pages: PagesItem[] = [];  

В вашем html :

 lt;input class="input is-primary" type="text" placeholder= {{pages[0]?.account_amount}}gt;