Question

我有2个selectedApp部分，第一个div类型selectedApp预选为app。我还有一个编辑字段，如果我在编辑弹出部分中将类型更改为business，它将在编辑部分和顶部div部分中更改。我在编辑部分更改的内容，不应反映到主div部分。任何人都可以帮助我。

HTML：

编辑部分：

<div class="form-group" >
                  <label style="padding-top: 15px;font-weight: 450" class="showlabel"> Type</label>
                  <ng-select [options]="apps" [(ngModel)]="selectedApp" name="apps" class='filterDropDown' placeholder="Type" notFoundMsg="No Type Found" required>
                  </ng-select>
                </div>

主要div：

<div class="form-group tut">
  <ng-select [options]="apps" [ngModel]="selectedApp" (ngModelChange)="typeChanged($event)" name="apps" class='box' placeholder="app" notFoundMsg="No Type Found">
  </ng-select>
</div>

TS：

this.apps = [
        { label:"app",value: "app" },
        { label:"business", value: "business" }
   ];
   this.selectedApp="app";

Answer 1

您必须使用单向绑定而不是双向绑定：

<ng-select [options]="apps" [ngModel]="selectedApp" name="apps" class='filterDropDown' placeholder="Type" notFoundMsg="No Type Found" required>
</ng-select>

在提交处理程序中，您可以将更改后的值设置为原始模型。

此示例代码可能与您的表单不同。

<form novalidate (ngSubmit)="save(form.value)" #form="ngForm" >

  <ng-select [options]="apps" [ngModel]="selectedApp" name="apps" class='filterDropDown' placeholder="Type" notFoundMsg="No Type Found" required>
</ng-select>

  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

在保存处理程序中，您会获得一个value，其中包含一个名为apps的属性，其中包含所选值：

 save( value: any) {
    console.log(value);
    this.selectedApp = value.apps;
  }

Answer 2

由于Angular适用于2路绑定，因此相同的变量名称在任何地方都反映相同的值。因此，只需更改选择的变量名称，

您可以将mainDiv模型更改为this.selectedMainApp

编辑部分：

<div class="form-group" >
    <label style="padding-top: 15px;font-weight: 450" class="showlabel"> Type</label>
    <ng-select [options]="apps" [(ngModel)]="selectedApp" name="apps" class='filterDropDown' placeholder="Type" notFoundMsg="No Type Found" required>
    </ng-select>
</div>

主要div：

<div class="form-group tut">
  <ng-select [options]="apps" [ngModel]="selectedMainApp" (ngModelChange)="typeChanged($event)" name="apps" class='box' placeholder="app" notFoundMsg="No Type Found">
  </ng-select>
</div>

<强> TS：

this.apps = [
        { label:"app",value: "app" },
        { label:"business", value: "business" }
   ];
this.selectedApp="app";
this.selectedMainApp="app";

此外，如果我们更改此变量名称，此函数包含的内容可能会中断，因此您应检查所有实例并相应地重命名。

如何使用angular2

2 个答案: