我正在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