Question

我正在尝试实现多选功能并使用复选标记显示所选项目。 HTML

<div class="multiselect">
    <div class="selectBox" (click)="showCheckboxes()">
         <select>
             <option>{{selectedBaseLicences}}</option>
         </select>
    <div class="overSelect"></div>
 </div>
<div id="checkboxes">
    <ng-container *ngFor="let base of baseLicences">
        <label class="checkbox">
            <input type="checkbox" name="checkbox1" (click)="myFunction(base)">
            <span class="checkbox__input"></span>
            <span class="checkbox__label">{{base}}</span>
         </label>
    </ng-container>
 </div>

TS

public selectedBaseLicences: string[] = [];

public showCheckboxes() {
        let checkboxes = document.getElementById("checkboxes");
        if (!this.expanded) {
          checkboxes.style.display = "block";
          this.expanded = true;
        } else {
          checkboxes.style.display = "none";
          this.expanded = false;
        }
      }

    public myFunction(selectedBase) {
        this.selectedBaseLicences.push(selectedBase)
    }

我正在尝试在“选择为数组”中显示选中的碱基，但是在this.selectedBaseLicences.push（selectedBase）操作之后模板没有得到更新。在这种情况下如何更新模板？

Answer 1

Array的push方法的实际作用是将另一个对象追加到现有数组中（没有引用更改），而Angular更改检测仅检查对象的身份。

您可以做的是在每次更新后使用 slice 方法复制阵列，该方法将返回一个新阵列。

 public myFunction(selectedBase) {
        this.selectedBaseLicences.push(selectedBase);
       this.selectedBaseLicences= this.selectedBaseLicences.slice()
    }

或者您可以使用 Spread syntax

 public myFunction(selectedBase) {
                this.selectedBaseLicences.push(selectedBase);
               this.selectedBaseLicences= [...this.selectedBaseLicences]
            }

Angular：不带ngModel的更新模板

1 个答案: