Question

我想禁用所有button，当selectedplace为null时，此方法有效，当对话框首次启动时，但是当我更改该选项时，所有时间。

这不应该是我尝试过的：

html：

      <label for="place">Einheit</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Change</button>
        </div>
        <select id="place" name="place" #place="ngModel" required class="form-control" [(ngModel)]="selectedplace" (change)="onDropdownChangeplace()">
          <option value=""></option>
          <option *ngFor="let i of UI_places" [ngValue]="i">{{i.name}}</option>
        </select>
        <div class="alert alert-danger" *ngIf="place.touched && !place.valid">Bitte eine Eingeben eingeben!</div>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Add</button>
          <button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Delete(red)</button>
        </div>
      </div>

TypeScript（已声明）：

public selectedplace: Place;

我该怎么办？

Answer 1

您在onDropdownChangeplace中做什么。我的猜测是您根据更改的索引分配了一个值。

当您不分配值时（如果为空选择），则先前的值仍绑定到ngModel。

选中stackblitz here。根据您的代码，它可以很好地启用和禁用。

这是组件中的代码。我完全按照您发送的方式保留了html。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
    public UI_places = [{id:0, name: 'home'},{id:1, name: 'work'}];
    public selectedplace: Place;

    onDropdownChangeplace() {

    }
}

变量在视图中不更新

1 个答案: