Question

我想创建带有角度2的动态html控件..请给出一些好的答案..

这是我的组件

@Component({
    selector: 'dcfield',
    templateUrl: '/html/shared/dynamic-controls.html',
})
export class DynamicControlComponent implements OnInit {
    @Input()
    clientComboData: any[];
    @Input()
    form: FormGroup;
    tableArray:any[];
    //get isValid() { return this.form.controls[this.field.key].valid; }

    constructor() {
        this.clientComboData = new Array<any>()
        this.clientComboData.push(new abc('Newsletter', 'Table', '0'));
        this.clientComboData.push(new abc('Cross Reference', 'Text', '1'));
        this.clientComboData.push(new abc('Cross2', 'Text', '1'));
        this.clientComboData.push(new abc('DOB', 'Date', '0'));
        this.clientComboData.push(new abc('Currency', 'Currency', '0'));
    }

    ngOnInit() {

        console.log(this.clientComboData)

    }


}
    class abc
    {
            a: string ;
            b: string ;
            c: string ;

        constructor(aa:string,bb:string,cc:string) {
            this.a= aa;
            this.b= bb;
            this.c= cc;
        }
    }

这是我的HTML

<div class="form-horizontal">
    <div class="row" *ngFor="let item of clientComboData">
        <div class="col-md-6" [ngSwitch]="item.b">
            <div class="form-group" *ngSwitchCase="'Table'">
                <label class="col-sm-4">{{item.a}}</label>
                <div class="col-sm-8 cheboxinput" >
                    <div class="checkbox checkbox-primary">
                        <input id="Newsletter" type="checkbox" checked>
                        <label for="Newsletter"></label>
                    </div>
                    <select data-width="auto" data-minimum-results-for-search="10" tabindex="-1" class="select2 form-control" id="">
                        <option>Select</option>
                        <option *ngFor="let opt of tableArray">{{opt.value}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group" *ngSwitchCase="'Text'">
                <label class="col-sm-4">{{item.a}}</label>
                <div class="col-sm-8">
                    <input type="text"  class="form-control" maxlength="50" required="">
                </div>
            </div>
            <div class="form-group" *ngSwitchCase="'Currency'">
                <label class="col-sm-4">{{item.a}}</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" maxlength="50" required="">
                </div>
            </div>
        </div>
    </div>
</div>

htmk已创建，但我希望在打字稿上获得这些值，以便哪种方法都适用。

Answer 1

此处您应该使用@ViewChild或@ViewChildren，如果您只有单个组件@ViewChild

在这种情况下，将您的compononet导入所需的页面并声明

@Viewchild(DynamicControlComponent) yourObjectName

然后你可以像普通类一样在打字稿中访问它

有关详细信息，请参阅此

http://learnangular2.com/viewChild/

为角度2中的动态控制创建动态模型

1 个答案: