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

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

0 голосов
/ 15 февраля 2019

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

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

{
    "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 в этом случае казался более простым.

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

В Angular есть труба keyvalue, с которой вы можете перебирать свойства объекта с помощью *ngFor.

Итак: 

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

StackBlitz

0 голосов
/ 15 февраля 2019

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

В Компоненте 

 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)">

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

...