Angular:更改克隆DOM元素的ng-model值

时间:2018-01-30 10:13:17

标签: javascript angular typescript

我正在ng-template克隆DOM元素时,当我点击一个下拉列表时,所生成的克隆生成的所有克隆由于ng-model克隆而表现相同。

<ng-template #clone>
<div class="mask1" *ngIf="question1 === true">
    <div class="">
        <div style="margin-left:15px">
            <div class="row margin-top-10">
                <div class="col-lg-1 col-sm-1 col-md-1 col-xs-1  ">
                    <button mat-mini-fab class="oval">
                        1
                    </button>
                </div>
                <div class="col-lg-5 col-sm-5 col-md-5 col-xs-5 how-do-you-feel margin-top-10 ">
                    How do you feel?
                    <div class="line"></div>
                </div>
                <div class="col-lg-6  col-sm-6 col-md-6 col-xs-6 ">
                    <div class="col-xs-11">
                    <mat-radio-button class="pull-right" value="1"  *ngIf="questiontype === 'multiplechoice'">
                                                    <mat-form-field class="choices">
                                                        <mat-select [(ngModel)]="questiontype" [(value)]="questiontype" (change)="changeOptions(questiontype)" class="choices">
                                                            <mat-option value="paragraph">
                                                                <span class="glyphicon glyphicon-align-justify choices "></span> Paragraph
                                                            </mat-option>
                                                            <mat-option value="multiplechoice">
                                                                <span class="glyphicon glyphicon-record choices"></span> Multiple choice
                                                            </mat-option>
                                                            <mat-option value="checkboxes">
                                                                <span class="glyphicon glyphicon-check choices"></span> Checkboxes
                                                            </mat-option>
                                                            <mat-option value="linearscale">
                                                                <span class="glyphicon glyphicon-option-horizontal choices"></span> Linear scale
                                                            </mat-option>
                                                            <mat-option value="date">
                                                                <span class="glyphicon glyphicon-calendar choices"></span> Date
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </mat-radio-button>

                                        <span assets/img/dublicate@3x.png 3x " class="dublicate " (click)="cloneTemplate() " >

        </div>
    </div>
</ng-template>

我的TS档案:

 // What to clone
@ViewChild('clone') template;

// Where to insert the cloned content
@ViewChild('container', {read:ViewContainerRef}) container;

 cloneTemplate(){

    const view = this.container.createEmbeddedView(this.template);
    this.container.insert(view);

}

对于HTML部分感到抱歉,但我想说的是我们可以改变克隆元素的行为。

我正在考虑更改克隆的ng-model

我的项目的视频链接https://www.youtube.com/watch?v=ND3IdZLTyvg&feature=youtu.be

0 个答案:

没有答案