Модель связывания для нескольких элементов

Question

У меня есть довольно сложный объект, который должен быть моделью для компонента.

Это может выглядеть примерно так:

{
    "attribute1": "value1",
    "attribute2": "value2",
    "attribute3": "value3",
    "attribute4": "value4",
    "attribute5": "value5",
    "attribute6": "value6",
    "attribute7": "value7",
    "attribute8": "value8"
}

Это может быть сохранено в компоненте в открытом атрибуте с именем "iHaveAVeryLongButReadableName".

Если мне теперь нужно создать вход для каждого атрибута в модели, я должен написать что-то вроде этого:

<input [(ngModel)]="iHaveAVeryLongButReadableName.attribute1" >
<input [(ngModel)]="iHaveAVeryLongButReadableName.attribute2" >
<input [(ngModel)]="iHaveAVeryLongButReadableName.attribute3" >

И поскольку все входы разные, я не могу использовать ngFor. (в реальном мире, а не в этом примере)

Со старым angularJS я мог бы сделать что-то вроде этого:

<div ng-model="iHaveAVeryLongButReadableName">
    <input ng-model="attribute1" >
    <input ng-model="attribute2" >
    <input ng-model="attribute3" >
</div>

Который вам будет НАМНОГО проще и читабельнее.

Есть ли решение для этого избыточного кода?

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

Есть идеи?

РЕДАКТИРОВАТЬ

Спасибо за ответы!

Извините, но это могло быть неясно, но *ngFor не работает для меня. Каждый вход полностью отличается от другого. Пример, кажется, был простым. Это выглядит примерно так:

<div>

    <input ng-model="iHaveAVeryLongButReadableName.attribute1" type="date" >
    <input ng-model="iHaveAVeryLongButReadableName.attribute2" type="number" >
    <special-input-component ng-model="iHaveAVeryLongButReadableName.attribute3" >
    <div>
        <div>
            some structural information {{iHaveAVeryLongButReadableName.attribute3}}
        </div>
        <input ng-model="iHaveAVeryLongButReadableName.attribute3" />
    </div>
</div>

В этом случае *ngFor не помог бы мне в любом случае. Я мог бы работать с *ngFor и *ngIf, но я думаю, что это будет гораздо сложнее, чем необходимо. "Старый" способ изменения области видимости для элемента дерева DOM в этом случае казался более простым.

Answer 1

Угловой имеет keyvalue труба, с которой вы можете перебирать свойства объекта *ngFor,

Так:

<div *ngFor="let val of iHaveAVeryLongButReadableName | keyvalue">
  <input [(ngModel)]="val.key">
</div>

StackBlitz

Answer 2

Да, вы можете перебирать ключи объекта, имея переменную в компоненте

В компоненте

 objectKeys = Object.keys;
 iHaveAVeryLongButReadableName= {
    "attribute1": "value1",
    "attribute2": "value2",
    "attribute3": "value3",
    "attribute4": "value4",
    "attribute5": "value5",
    "attribute6": "value6",
    "attribute7": "value7",
    "attribute8": "value8"
}

тогда в вашем html просто перебирайте ключи так:

<div *ngFor="let key of objectKeys(iHaveAVeryLongButReadableName)">

Дайте мне знать, если это помогло