Question

我是一个热心的新手试图了解更好的Angular2。我想提出一个条件。

我想做什么？禁用下拉列表的第一个选项。

有条件的是什么？如果var等于XX则禁用

数据

export class SuperComponent {
  moon = ['Select One Option', 'Option 1', 'Option 2','Option 3'];
}

模板

<option *ngFor="let OptionsList of moon" *ngIf="OptionsList==='Select One Option'" disabled>
  <span>{{OptionsList}}</span>
</option>

那么，有什么建议吗？

Answer 1

在这种情况下你不需要*ngIf，你可以使用属性绑定。简单地：

<option *ngFor="let OptionsList of moon" [attr.disabled]="OptionsList==='Select One Option'">
  <span>{{OptionsList}}</span>
</option>

而且，由于disabled是option的属性和属性，因此更短：

<option *ngFor="let OptionsList of moon" [disabled]="OptionsList==='Select One Option'">
  <span>{{OptionsList}}</span>
</option>

Answer 2

如果结果为true，

ngIf将删除整个组件<option></option>。要实际添加<option disabled></option>，我建议采用下一种方法。

要使用禁用，必须先注入，所以首先我会做一个指令

@Directive({
selector: '[sdDisabled]',
})
export class sdDisabled {
@Input('sdDisabled') isDisabled: boolean;

constructor(private el: ElementRef) {}

@Input() set sdDisabled(condition: boolean) {
    if (condition) {
        this.el.nativeElement.setAttribute('disabled');
    } else {
        this.el.nativeElement.removeAttribute('disabled');
    }
}

}

现在您可以使用[sdDisabled]附加禁用属性

<option *ngFor="let OptionsList of moon" [sdDisabled]="OptionsList==='Select One Option'">
  <span>{{OptionsList}}</span>
</option>

理解Angular2中* ngIf的值

2 个答案: