Question

嗨，我今晚将项目从V7升级到了V8，由于他们所做的新更新，我在读取@viewChild时遇到了很多错误。我在所有@viewChild中都添加了{static：true}，但是后来我遇到了这样设置的触发器：

 @ViewChild('tTaskTeam', { read: MatAutocompleteTrigger }) autoCompleteForTaskTeamTrigger: MatAutocompleteTrigger;
  @ViewChild('tofficeUser', { read: MatAutocompleteTrigger }) officeUsersautoCompleteInputTrigger: MatAutocompleteTrigger;
  @ViewChild('recipientType', { read: MatAutocompleteTrigger })  recipientTypeTrigger: MatAutocompleteTrigger;

viewChild仅接受两个参数，而我不能添加三个。所以我读了一下：MatautocompleteTrigger，它破坏了我要执行的自动完成功能。

这是我收到的错误消息：

类型'{的参数，读为：typeof MatAutocompleteTrigger; }' 不是可分配给类型为'{的参数？read ?:任何;静态：布尔值； }'。类型'{缺少属性'static'，读取：typeof MatAutocompleteTrigger; }”，但类型为“ {必读？：任何；静态的：布尔值}'。ts（2345） core.d.ts（8066，9）：此处声明为“静态”。

我添加了这些触发器，以在用户输入非所选选项列表中的字符时触发。因此它将清除并向用户显示一条消息，让他们再次选择。

这是完整的实现： HTML

<mat-form-field appearance="outline" class="task-info-form-field">
  <input tab-directive #tTaskTeam matInput (keyup.enter)="chooseFirstOption(autoCompleteForTaskTeam)" [matAutocomplete]="autoCompleteForTaskTeam" formControlName="tTaskTeam" matTooltip="You can search and it will try to autocomplete the name for you!" placeholder="Select Group">
  <mat-autocomplete #autoCompleteForTaskTeam='matAutocomplete' [displayWith]="displayTeamName">
    <mat-option class="matAutoCompleteSelect" *ngFor="let user of filteredOptions | async" [value]="user">
      <span>{{ user.TeamName }}</span>
    </mat-option>
  </mat-autocomplete>
  <mat-error>
    Value entered is NOT VALID please selected only from suggested values.
  </mat-error>
</mat-form-field>

TS

@ViewChild(MatAutocomplete, {
  static: true
}) autoCompleteForTaskTeam: MatAutocomplete;

@ViewChild('tTaskTeam', {
  read: MatAutocompleteTrigger
}) autoCompleteForTaskTeamTrigger: MatAutocompleteTrigger;

subscriptionTeam: Subscription;

ngAfterViewInit() {
  this._subscribeToClosingActions();
  this._subscribeToClosingActionsThree();
  this._subscribeToClosingActionsTwo();
}

ngOnDestroy() {
  if (this.subscription && !this.subscription.closed) {
    this.subscription.unsubscribe();
  }
  if (this.subscriptionTeam && !this.subscriptionTeam.closed) {
    this.subscriptionTeam.unsubscribe();
  }
  if (this.subscriptionUser && !this.subscriptionUser.closed) {
    this.subscriptionUser.unsubscribe();
  }
}


private _subscribeToClosingActions(): void {
  if (this.subscriptionTeam && !this.subscriptionTeam.closed) {
    this.subscriptionTeam.unsubscribe();
  }

  this.subscriptionTeam = this.autoCompleteForTaskTeamTrigger.panelClosingActions
    .subscribe(e => {

        if (!e || !e.source) {
          this.form.controls.tTaskTeam.setValue('');
        }
      },
      err => this._subscribeToClosingActions(),
      () => this._subscribeToClosingActions());
}

Answer 1

应该是

@ViewChild（'tTaskTeam'，{阅读：MatAutocompleteTrigger，静态：false}）autoCompleteForTaskTeamTrigger：MatAutocompleteTrigger;

Answer 2

我无法发表评论，所以我必须添加答案

https://v8.angular.io/guide/static-query-migration

升级到V8后，@ ViewChild（'tTaskTeam'，{阅读：MatAutocompleteTrigger}）无法正常工作

2 个答案: