Question

我在Angular 2中有很多问题

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

Stack：Anglar 2，Primeng

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

问题1：

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

更新问题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：在这种情况下，如何使其成为双向绑定，如何获得更改后的值对象？

Answer 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>

请检查嵌入式屏幕截图。

Answer 2

我认为您的问题在这里

"defaultValue": "false",

要在其中设置布尔值，但要设置一个字符串，该字符串将解析为true。布尔变量未设置引号。尝试

"defaultValue": false,

在尝试设置布尔值的任何地方都存在问题。

Angular 2，primeng：嵌套的* ngFor中的双向绑定和* ngFor

2 个答案: