Angular 2，primeng ：在 *ngFor 中的 Primeng 中嵌套 *ngFor 和 ngModel 的两种方式绑定答案

【问题标题】：Angular 2, primeng :Two way binding in nested *ngFor and ngModel in Primeng in *ngForAngular 2，primeng ：在 *ngFor 中的 Primeng 中嵌套 *ngFor 和 ngModel 的两种方式绑定
【发布时间】：2019-05-06 19:28:00
【问题描述】：

我有一堆关于 Angular 2 的问题

我创建了一个演示来向您展示行为

堆栈：Anglar 2，Primengp>

https://stackblitz.com/edit/primeng-template-5hrvte

问题 1：

我有一个 json 文件，通过它我创建了动态 UI，如复选框和输入，并动态填充了复选框选项。现在，问题从这里开始没有 ngModel 适用于组合框、输入或复选框（我想显示默认值）

更新问题 1：我得到了解决方案，但仍然停留在问题 2

 [(ngModel)]="arrays.field[index].defaultValue" in input field
 [(ngModel)]="arrays.field[index].item[0].value" in dropdown
 [(ngModel)]=uiItems.defaultValue in checkbox {Refer ANS 1 soluton for it}

还要加

[name]="uiItems.id"

为了填充默认值

问题2：如何在这种情况下进行双向绑定，如何获取更改的值对象？

【问题讨论】：

虽然 stackblitz 是提供 Angular 示例的好工具，但也请复制并格式化问题本身的代码相关部分，因为链接可能会失效，如果没有，问题会很不清楚它。
@Pac0 好的，您可以通过链接查看问题吗？在这种情况下我们如何实现双向绑定？

标签： angular primeng

【解决方案1】：

COMBOBOX请使用以下结构，其中块（A）具有适当的默认值。

{
  "uiWidget": "COMBOBOX",
  "id": "7",
  "name": "Order Type",
  "key": "pl.export.label.orderType",
  "defaultValue": "DEFAULT", // ------- (A)
  "width": "250",
  "isEnabled": "true",
  "item": [
    {
      "key": "00",
      "value": "DEFAULT"
    },
    {
      "key": "01",
      "value": "WILL CALL PICK UP"
    }
  ]
}

对应的COMBOBOX html代码

<p-autoComplete 
    #dropdownValue 
    [inputId]="uiItems.id"
    [dropdown]="true"
    [name]="uiItems.id"
    [(ngModel)]="arrays.field[index].defaultValue"
    [suggestions]="getOptions(uiItems.item)">
</p-autoComplete>

在这种情况下，它将更新“uiItems”的defaultValue属性

app.component.html的所有代码

<form #addPartDialogForm="ngForm" autocomplete="off">
    <div *ngFor="let arrays of buildUI">
      <div *ngFor="let uiItems of arrays.field;  let index = index">

<br/>

        <div *ngIf="uiItems.uiWidget === 'TEXTINPUT'">
          <div>
            <span class="ui-inputgroup-addon"> {{uiItems.name}}</span>
            <input  [name]="uiItems.id" [(ngModel)]="arrays.field[index].defaultValue"
              [type]="uiItems.type" pInputText>
              <pre style="color:red;">{{arrays.field[index] | json}}</pre>
          </div>
        </div>
<br/>
        <div *ngIf="uiItems.uiWidget === 'COMBOBOX'">
          <div>
            <span class="ui-inputgroup-addon"> {{uiItems.name}}</span>
            <p-autoComplete #dropdownValue [inputId]="uiItems.id"
                            [dropdown]="true"
                            [name]="uiItems.id"
                            [(ngModel)]="arrays.field[index].defaultValue"
                            [suggestions]="getOptions(uiItems.item)">
            </p-autoComplete>
            <pre style="color:red;">{{arrays.field[index] | json}}</pre>
          </div>
        </div>


        <div *ngIf="uiItems.uiWidget === 'CHECKBOX'">
          <div>
            <span class="ui-inputgroup-addon"> {{uiItems.name}}</span>
            <p-checkbox #checckbox
                        [name]="uiItems.id"
                        [binary]="true"
                        [inputId]="uiItems.id"
                        [(ngModel)]= "uiItems.defaultValue" 
            ></p-checkbox>
          </div>
        </div>

      </div>
    </div>
  </form>

请检查内联屏幕截图。

【讨论】：

【解决方案2】：

我认为你的问题在这里

"defaultValue": "false",

你想设置一个布尔值，但设置一个字符串，它被解析为真。布尔变量没有用引号设置。试试

"defaultValue": false,

在任何尝试设置布尔值的地方都会遇到这个问题。

【讨论】：

好的，您可以通过链接查看问题吗？在这种情况下我们如何实现双向绑定？你的答案也可以解决真假值，但当输入的默认值是字符串时不能。那里 ngModel 不工作