0

我们正在使用 Angular 材料开发我们的 Angular 5 应用程序。我们有 2 组 4 个类似的自动完成类型字段。我们已经使用 Material AutoComplete 字段实现了。

第一组 4 个字段用于获取客户详细信息。第二组字段获取客户详细信息，但第二组的可见性是可选的，由复选框控制。该功能运行良好。但是当我通过tag:MatAutocompleteTrigger订阅实现强制选择时，第一组字段工作正常。而对于加载的第二组字段应该仅在选中复选框时不可见，而第二组字段将变为可见。

由于存在错误，我将代码片段放置在发生错误的位置。我只是在这里显示一个带有 id 的字段 altCustomerName altCustomerNameId。我试图将此 id 值设置为 true ontag:ngOnInit并设置为 false on tag:ngAfterViewInit。但这也以错误告终。

HTML（视图）

<mat-form-field>
     <input placeholder="Customer Name" type="text" #altCustomerNameId matInput [formControl]="altCustomerNameControl" [(ngModel)]='selectedAltCustomerName' [matAutocomplete]="altCustomerName" required>
     <mat-autocomplete #altCustomerName="matAutocomplete" class='customerDetails'>
        <mat-option (click)="setAltCustomerDetails(altCustomer)" *ngFor="let altCustomer of filteredAltCustomersByName | async" [value]="altCustomer.name">
                    {{ altCustomer.custnum + ' ' + altCustomer.name + ' '+ altCustomer.countryname }}
        </mat-option>
     </mat-autocomplete>
</mat-form-field>

组件代码：（在类中声明了 altCustomerNameControl）enter code here

@ViewChild('altCustomerNameId', {
            read: MatAutocompleteTrigger
})
altCustomerNameTrigger: MatAutocompleteTrigger;
        ..
        ....
        ....
ngAfterViewInit() {
    this._subscribeToClosingActions();
}
ngOnDestroy() {
      ....
   if(this.altCustomerNameSubscription &&
       !this.altCustomerNameSubscription.closed)
    .....
}

this.altCustomerCodeSubscription = this.altCustomerCodeTrigger.panelClosingActions.subscribe(
   event => {
      if (!event || !event.source) {
          this.altCustomerNameControl.setValue('');
          this.altCustomerCodeControl.setValue('');
          this.selectedAltCustomerName = '';
          this.selectedAltCustomerCode = '';
          this.selectedAltCustomerCountry = '';
       }
   },err => this._subscribeToClosingActions(),
      () => this._subscribeToClosingActions()
);

如果您需要对代码进行任何说明，请告诉我。

4

1 回答 1

0

我们使用 *ngIf 来显示或隐藏基于复选框选择的部分。使用 [style.display] 进行修改，如下代码解决了上述问题。

旧代码：（这控制了部分的可见性）

    <div class="row" **ngIf='optAlternativeCustomer'*>

新代码：（修改部分可见性如下）

    <div class="row" *[style.display]="!optAlternativeCustomer?'none':'flex'"*>

于 2018-04-11T04:47:32.317 回答