Установите все свойства элемента WebComponent от JSON, используя интерфейс ⇐ Javascript

[Anonymous]

У меня есть карта компонент и компонент карт . Карты группы компонентов Список карт компонентов, которые он получает через API. Проблема в том, что я не могу заполнить все свойства компонента карты со значениями, которые я получаю через API в формате JSON и используя соответствующий интерфейс ICARD .
интерфейс карты:

Код: Выделить всё

export interface iCard {
idx: number
name: string
value: string
site: string
}

Компонент карты:

Код: Выделить всё

@customElement('sx-card')
export class AppCard extends LitElement implements iCard {
@property({type: Number}) idx = 1;
@property({type: String}) name = '';
@property({type: String}) value = '';
@property({type: String}) site = '';

render() {
return html`${this.name}`;
}
}

Card Component:

Код: Выделить всё

@customElement('sx-cards')
export class AppCards extends LitElement {
connectedCallback(): void {
super.connectedCallback();
this.loadCards();
}

async loadCards(): void {
let ajaxService = new AjaxService();
let cards = await ajaxService.getCards();

cards.forEach((card: iCard) => {
let elCard: AppCard = document.createElement('sx-card') as AppCard;
// This is where I need to pass the values ​​from the "card" response to the "elCard" component
this.appendChild(elCard);
});
}
}

card компонент реализует интерфейс icard , а ответ API является экземпляром интерфейса icard , мне нужно передать значения От ответа API на компонент. Мне кажется, что, поскольку ответ имеет тип iCard , а компонент реализует iCard , должен быть лучший способ, чем присвоение им один за другим.
< em> и если у вас есть какие -либо предложения по улучшению кода, я буду признателен, я изучаю TS.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -interface