Question

我目前正在尝试基于在我的angular 4应用程序中的组件中设置属性来禁用“添加”按钮。我可能对变更检测有疑问。它有时会起作用，但有时却不会。我假设在组件代码中设置属性应自动触发更改检测。我基本上需要在编辑Lob时禁用添加和下拉菜单，并在保存时启用添加按钮和下拉菜单。有人可以告诉我问题出在哪里吗

在下面的代码中，我尝试使用代码[disabled]="isOpenLob"禁用“添加”按钮（第二个div元素）以及下拉菜单（“第一个div”元素）。

Component.html代码

<div class="mt-4 col-sm-6 only-ie">
    <select [disabled]="isOpenLob" class="select-wrapper" [(ngModel)]="selectedLineOfBusiness" name="linesOfBusiness">
        <option disabled="disabled" [ngValue]="defaultLineOfBusiness">Test</option>
        <option class="theme--option--default" *ngFor="let lob of linesOfBusiness" [ngValue]="lob">Test</option>
    </select>
</div>
<div class="mt-4 col-sm-2">
    <button href="javascript:void(0);" [disabled]="isOpenLob" (click)="add()" type="button" class="col-12 btn btn-primary">Test</button>
</div>



<div>
         <table class="table table-list">
              <thead class="lob-thead">
                <tr>
                  <th class="column-sort">{{'NAME'|translate}}</th>
                  <th class="column-sort">{{'LABEL'|translate}}</th>
                  <th class="column-sort">{{'STRUCTURE'|translate}}</th>
                  <th class="column-sort">{{'LOB'|translate}}</th>
                  <th class="column-sort hidden-md-down min-width">{{'PREMIUM'|translate}}</th>
                  <th class="column-sort hidden-md-down">{{'PAYOUTFACTORS'|translate}}</th>
                  <th class="column-sort hidden-md-down min-width">{{'INCEXPENSE'|translate}}</th>
                  <th class="column-sort hidden-md-down">{{'COMMERCIALPREMIUM.LABEL'|translate}}</th>
                  <th class="column-sort hidden-md-down">{{'BUSINESSCEDED'|translate}}</th>
                  <th class="column-sort"></th>
                  <th class="column-sort"></th>
                </tr>
              </thead>
              <tbody>
                <ng-template let-row let-i="index" ngFor [ngForOf]="this.run.linesOfBusinessInput">
                  <tr app-lob-item [ngClass]="{'tr--opacity': selectedIndex !== -1, 'active': selectedIndex === i, 'complete': row.completed, 'incomplete': !row.completed}"
                    [lob]="row" [modelTypes]="run.referenceData.modelTypes" [linesOfBusiness]="linesOfBusiness" [index]="i"
                    (deleteEvent)="delete($event)" (copyEvent)="copy($event)" (editEvent)="edit($event)"></tr>
                      <ng-template [ngIf]="selectedIndex === i">
                          <tr app-lob-item-detail class="hidden" [domicile]="this.run?.referenceData?.domiciles" [lob]="row" [editableLob]="editableLob" [index]="i" [show]="selectedIndex === i"
                          [policyTypes]="run.referenceData.policyTypes" [lobNames]="lobNames" [modelTypeOptions]="run.referenceData.modelTypeOptions" [modelTypes]="run.referenceData.modelTypes"
                          (cancelEvent)="cancel($event)" (saveEvent)="save($event)"></tr>
                      </ng-template>
                </ng-template>
              </tbody>
</div>

Component.ts代码

private _isOpenLob: boolean;

get isOpenLob(): boolean {
    return this._isOpenLob;
}

edit(index: number) {
    this._isOpenLob = true;
    this.lobNames = this.run.linesOfBusinessInput.map(x => x.id);
    this.selectedIndex = index;
    this.editableLob = JSON.parse(JSON.stringify(this.run.linesOfBusinessInput[this.selectedIndex]));
    this.changeTracker.commit();
}


save(event: any) {
    this._isOpenLob = false;
    this.run.linesOfBusinessInput[event.index] = event.lob;
    this._persist();
    if (event.closeLob) {
        this.selectedIndex = -1;
    }
}

属性值更改未触发angular4

0 个答案: