Question

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

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

由于存在错误，我将代码片段放在发生错误的位置。我只是在这里显示一个id为altCustomerNameId的字段altCustomerName。我尝试在tag:ngOnInit上将此ID值设为true，并在tag:ngAfterViewInit上设置为false。但这也最终会出错。

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()
);

如果您需要在代码中做出任何澄清，请与我们联系。

Answer 1

我们已使用* ngIf根据复选框选择显示或隐藏该部分。使用[style.display]修改相同的代码解决了上面的问题。

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

＆＃13;

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

＆＃13;

新代码：（修改了部分可见性，如下所示）

＆＃13;

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

＆＃13;

Angular 5

1 个答案: