使用ngFor进行循环以进行动态模板化和数据绑定ngModel

Question

我使用ngFor指令动态创建小部件，并使用ngModel进行双向数据绑定以绑定小部件内的值。

我使用文本框显示值，并使用css删除文本框外观。

现在，当我克隆元素时，新的小部件正在创建，但是当我更改小部件内的值时，值也会在数组的其他元素中更新。

像这样：
这些值将添加到其他数组对象中。
这我想防止：

这是模板：

<div *ngFor="let wid of widgets;let idx=index;trackBy:trackBywids">
    <ng-container *ngIf="wid !== undefined">
        <ng-container *ngIf="wid.type == 'widget2'">
            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 wid_box">        
                <div class="ongoing_prjct_card dash_panel cmn_card_gjt" [style.background]="wid.bgColor">
                    <div *ngIf="show_action" class="action-ui" id="tour-action-ui-id">
                        <span class="actions">
                            <a href="javascript:void(0);">
                                <span class="edit_icon">
                                    <a [(colorPicker)]="wid.bgColor">
                                        <img src="/assets/images/color-picker.png" alt="" />
                                    </a>
                                </span>
                            </a>
                        </span>        
                        <!-- <span class="actions">
                            <a (click)="mkrd(idx)">
                        <i class="fa fa-edit"></i><span class="tooltip">Edit</span></a>
                        </span> -->        
                        <span class="actions">
                                <a href="javascript:void(0);">
                                    <span class="edit_icon">
                                        <a (click)="cloneElement(wid,idx)">
                                            <i class="fa fa-clone">
                                            </i>
                                        </a>
                                    </span>
                                </a>
                            </span>
                        <span class="actions">
                            <a href="javascript:void(0);">
                                <span class="edit_icon">
                                    <a (click)="wid.font = changeSize('dec',wid.font)">
                                        <img src="/assets/images/font-increase.png" alt="" />
                                    </a>
                                </span>
                            </a>
                        </span>
                        <span class="actions">
                            <a href="javascript:void(0);">
                                <span class="edit_icon">
                                    <a (click)="wid.font = changeSize('inc',wid.font)">
                                        <img src="/assets/images/font-decrease.png" alt="" />
                                    </a>
                                </span>
                            </a>
                        </span>
                        <span class="actions">
                            <a (click)="delElement(idx)">
                                <span class="edit_icon">
                                    <i class="fa fa-trash-o">
                                    </i>
                                </span>
                            </a>
                        </span>
                    </div>
                    <div class="row hdr_typ">
                        <div class="col-md-6 col-xs-6 typ_nm">
                            <label [ngStyle]="{'font-size': wid.font+'px'}"><input name="wh{{idx}}" type="text" class="pnl_inp" (ngModel)="wid.headings[0]" [value]="wid.headings[0]"></label>        
                        </div>
                        <div class="col-md-6 col-xs-6 typ_dtl">
                            <label [ngStyle]="{'font-size': wid.font+'px'}"><input name="wh1{{idx}}" type="text" class="pnl_inp" [(ngModel)]="wid.headings[1]"></label>
                        </div>
                    </div>
                    <div class="row opn_typ">
                        <div class="col-md-12 col-xs-12 highlight_label">
                            <label [ngStyle]="{'font-size': wid.font+'px'}">
                                <span class="highlight"><input type="text" class="pnl_inp" [(ngModel)]="widgets[idx].sub_heading[0]"></span>
                            </label>
                            <label [ngStyle]="{'font-size': wid.font+'px'}"><input type="text" class="pnl_inp" [(ngModel)]="widgets[idx].sub_heading[1]"></label>
                        </div>
                    </div>
                    <div class="row progress_ratio">
                        <ng-container *ngFor="let ds of wid.data">
                        <div class="col-md-3 col-sm-3 col-xs-12 ratio_1">
                            <div class="rt1"></div>
                            <div class="small_label">
                                <label [ngStyle]="{'font-size': wid.font+'px'}">
                                    <span class="highlight"><input type="text" class="pnl_inp" [(ngModel)]="ds.title"></span>
                                </label>
                                <label [ngStyle]="{'font-size': wid.font+'px'}"><input type="text" class="pnl_inp" [(ngModel)]="ds.value"></label>
                            </div>
                        </div>
                    </ng-container>                         
                    </div>
                </div>
            </div>
        </ng-container>
    </ng-container>
</div>

我使用的是angular-cli版本1.2.5。感谢