初始化不确定复选框

Question

我需要创建一个以不确定状态开头的inderterminate checkbox。

要做到这一点，我在HTML

中创建了一个复选框

<div *ngIf="item.CanSearch && item.SearchType === 'Bool'"><input type="checkbox" id="my-checkbox"  name="insideListResourceIdsCB" (click)="indeterminateCheckbox($event.target)" /></div>

当你点击复选框时，这个函数被调用（这部分没有任何问题）

/* function to create an indeterminate checkbox*/
public indeterminateCheckbox(cb) {       
    if (cb.readOnly) {
        cb.checked = cb.readOnly = false;
        this.insideListResourceIds = false;
    }
    else if (!cb.checked) {
        cb.readOnly = cb.indeterminate = true;
        this.insideListResourceIds = null;
    } else if (cb.checked) {
        this.insideListResourceIds = true;
    }
    this.getEmployeesOverview();
}

但是当我加载视图时会出现问题。 checbox需要具有不确定的视觉状态，这只能通过javascript实现。为此，我创建了这个功能：

ngAfterViewInit() {
        let checkbox = <any>$("#my-checkbox");
        checkbox.indeterminate = true;
}

然而每次我加载视图时，我的复选框都是空的。但是，当我console.log(checkbox)这就是结果时，我没有收到任何错误：

我的问题是：如何在视图加载时将复选框的可视状态正确设置为indeterminate？

Answer 1

我会利用attribute指令来设置indeteminate

@Directive({
  selector: 'input[type=checkbox][indeterminate]'
})
export class IndeterminateDirective {
  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    this.elRef.nativeElement.indeterminate = true;
  }
}

现在您可以像

一样使用它

<input type="checkbox" indeterminate ...

<强> Plunker Example

第二种方法可能只是使用属性绑定，如

[indeterminate]="true"

<强> Plunker Example