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-tree元素范围的“旧”方法似乎更容易。

Answer 1

Angular具有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)">

让我知道是否有帮助

多个元素的绑定模型

编辑

2 个答案: