こんにちは、今夜、プロジェクトを V7 から V8 にアップグレードしましたが、@viewChild の読み取り中に大量のエラーが発生しました。これは、彼らが行った新しい更新が原因でした。すべての @viewChild に { static: true } を追加しましたが、次のように設定したこれらのトリガーに出くわしました。
@ViewChild('tTaskTeam', { read: MatAutocompleteTrigger }) autoCompleteForTaskTeamTrigger: MatAutocompleteTrigger;
@ViewChild('tofficeUser', { read: MatAutocompleteTrigger }) officeUsersautoCompleteInputTrigger: MatAutocompleteTrigger;
@ViewChild('recipientType', { read: MatAutocompleteTrigger }) recipientTypeTrigger: MatAutocompleteTrigger;
は 2 つのviewChild
パラメーターのみを受け入れ、3 つを追加することはできません。だから私は read: MatautocompleteTrigger
out を取り、私が行っていたオートコンプリート機能を壊しました。
これは私が得ているエラーメッセージです:
タイプ '{ read: typeof MatAutocompleteTrigger; の引数。}' は型 '{ read?: any; のパラメーターに代入できません。静的: ブール値; }'。タイプ '{ read: typeof MatAutocompleteTrigger; にプロパティ 'static' がありません。}' ですが、タイプ '{ read?: any; では必須です。静的: ブール値; }'.ts(2345) core.d.ts(8066, 9): 'static' がここで宣言されています。
これらのトリガーを、ユーザーが選択したオプション リストにない文字を入力した場合にトリガーするように追加しました。そのため、クリアされ、ユーザーに再度選択するようメッセージが表示されます。
これは完全な実装です: 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());
}