如何在HTML中迭代和引用ControlGroup数组 [英] How to iterate and reference array of ControlGroup in HTML

问题描述

在Angular 2中，如何迭代ControlGroup的数组并引用组中的Controls?

In Angular 2, How do I iterate an array of ControlGroup and reference the Controls within the group?

ControlGroup和ControlArray plnkr示例创建(空)城市控制 s:

The ControlGroup and ControlArray plnkr example create an array of (empty) city Controls:

ctrlCities: Control[] = [
    new Control(''),
    new Control(''),
    new Control('')
];

将它们包装在 ControlArray 中:

citiesArray: ControlArray = new ControlArray(this.ctrlCities);

并将它们以 citites 的形式分配给 ControlGroup 形式:

and assigns them to the form ControlGroup as citites:

formGroup: ControlGroup = new ControlGroup({
    name: new ControlGroup({
        first: this.ctrlFirst,
        middle: this.ctrlMiddle,
        last: this.ctrlLast
    }),
    food: this.ctrlFood,
    cities: this.citiesArray
});

然后，HTML迭代 ControlGroup 形式:

The HTML then iterates the form ControlGroup:

<form [ng-form-model]="formGroup">

和城市 ControlGroup :

    <ul ng-control-group="cities">

并最终处理 Control s数组中的每个 Control :

and finally handles each Control in the array of Controls:

      <li *ng-for="#ctrl of ctrlCities; #i = index"><input ng-control="{{i}}"></li>

如果城市管理员是一个小组，那么我将如何引用该小组中的控件?

大概我会添加

ngControlGroup="{{i}}"

到我的块，然后在该块中引用该组的各个控件，但这在我的应用程序中导致以下结果:

to my block and then reference the group's individual controls within that block but this results in the following in my application:

angular2.dev.js:23597 Error: Cannot find control '0'
    at new BaseException (angular2.dev.js:7464)
    at _throwError (angular2.dev.js:20733)
    at Object.setUpControlGroup (angular2.dev.js:20726)
    at NgFormModel.addControlGroup (angular2.dev.js:16863)
    at NgControlGroup.ngOnInit (angular2.dev.js:16708)
    at AbstractChangeDetector.ChangeDetector_MarketplaceAddComponent_7.detectChangesInRecordsInternal (viewFactory_MarketplaceAddComponent:2800)
    at AbstractChangeDetector.detectChangesInRecords (angular2.dev.js:8156)
    at AbstractChangeDetector.runDetectChanges (angular2.dev.js:8139)
    at AbstractChangeDetector._detectChangesContentChildren (angular2.dev.js:8212)
    at AbstractChangeDetector.runDetectChanges (angular2.dev.js:8140)

任何想法如何做到这一点?

Any ideas how to do this?

旁边::控件API有点尴尬:在控制器中，将新的 Control s push 放入 ControlArray ( citiesArray )，但是在视图中我们迭代了 Control s( ctrlCities )的数组.为什么不选一个?

Aside: The control APIs are a bit awkward: in the controller new Controls are pushed to the ControlArray (citiesArray) but in the view we iterate the array of Controls (ctrlCities). Why not one or the other?

推荐答案

以下是带有以下内容的更新的plnkr:解决方案;控制器被修改为对每个城市使用具有 name 和 size 控件的组:

Here's an updated plnkr with the solution; the controller is modified to use a group for each city with name and size controls:

ctrlCities: ControlGroup[] = [
    new ControlGroup({'name':new Control(''),'size':new Control('')}),
    new ControlGroup({'name':new Control(''),'size':new Control('')}),
    new ControlGroup({'name':new Control(''),'size':new Control('')})
];

和视图集组在 div 中的数组中，然后直接引用 name 和 size :

and the view sets group in the array in a div and then references name and size directly:

    <ul ng-control-group="cities">
      <li *ng-for="#ctrl of ctrlCities; #i = index">
      <div ng-control-group="{{i}}">
        <input ng-control="name"> <input ng-control="size">
      </div>
      </li>
    </ul>

这篇关于如何在HTML中迭代和引用ControlGroup数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！