angular 中的 QueryList 相当于 control.disable

Question

我需要根据我的 angular 表单禁用一些字段。我试图禁用组件 class 中的 DOM 元素，因为许多 html 标签是自定义的，因此不能在那里使用 disabled 属性。我这样做的方法是在我的组件中使用 @ViewChild/@ViewChildren 并在 ngAfterViewInit() 中禁用。我无法禁用 html 中 ngIf 内的元素。下面是代码： Html:

<div *ngIf="displayAdvOpt">
        <div class="card-title">Rules</div>
        <abc-select-field
          #rule
          width="100%"
          label=" "
          formControlName="_rules"
          [options]="rules"
        ></abc-select-field>
<div>

组件class：

@ViewChildren('rule') ruleSelect;

当在组件 class 中记录 ruleSelect 时，它表明它是一个 QueryList 而不是 FormControl，对于不在 ngIf 中的元素就是这种情况。因此，我无法执行 ruleSelect.control.disable() 以使其在 html 中被禁用。我在 ngAfterViewInit() 中做这些。请让我知道如何禁用 QueryLst 或者是否有任何其他方法。

Answer 1

为了禁用 select 字段，您既不需要知道 'distinction' (QueryList/Control) 也不需要知道 'local reference' (#rule) ：

很简单，在你想要禁用的代码中，你只需要这样做：

this.form.get('_rules').disable();
// or this.form.constrols['_rules'].disable();

同样，当你想要re-enable它时，你可以使用：

this.form.get('_rules').enable();

Answer 2

以下是我尝试过的解决方法。

<div *ngIf="displayAdvOpt">
            <div class="card-title">Rules</div>
            <abc-select-field
              #rule
              width="100%"
              label=" "
              formControlName="_rules"
              [options]="rules"
              on-mouseover="isDisabled()"
            ></abc-select-field>
    <div>

在组件 class 中：

@ViewChild('rule') ruleSelect;
isDisabled() {
    if (this.showChanges){
      this.ruleSelect.control.disable();
    }

我看到在 ngAfterViewInit() 中，ruleSelect 是一个 QueryList，但在 isDisabled() 中，方法在 on-mousehover 之后调用，它作为 AbcSelectFieldComponent 出现，所以我可以调用 .control.disable()在上面。我能想到的唯一原因是—— 欢迎大家多提建议！！

Answer 3

@Abhinash，如果不在屏幕上，您将无法访问任何元素。因为你有 *ngIf 下的元素，如果你需要条件变为真，并且“在 Angular 重绘之后”，enable/disable... 所以，一般来说

this.condition=true;
setTimeout(()=>{
   this.ruleSelect.....
})

但是您的 abc-select-field 无论如何都有一个 FormControl，即使 abc-select-field 不在屏幕上，FormControl 也存在，所以如果您使元素被禁用取决于控件是否被禁用

angular 中的 QueryList 相当于 control.disable

What is the equivalent of control.disable in case of QueryList in angular

html

disabled-input

angular

angular-reactive-forms