角墊自動完成不顯示選項

Question

我正在使用自動完成功能，因此用戶可以選擇一個地址（或搜索它並選擇它）。

在同一頁面上，用戶可以添加地址。 添加地址后，我想將地址添加到 mat-autocomplete 中。

我的問題目前是 mat-autocomplete 沒有顯示任何選項。 為了進行故障排除，我設置了一個 div，它使用 *ngFor 來顯示地址並且可以工作和更新。

// 組件（省略了一些代碼）

filteredAddresses_pickup;

constructor(public translate: TranslateService, private addressService: 
AddressService, private route: ActivatedRoute) { }

ngOnInit() {
this.addresses = this.route.snapshot.data['addresses'];

this.filteredAddresses_pickup = Observable.create((observer: Observer<Address[]>) => {
  observer.next(this.addresses);

  this.addressService.addressesChanged.subscribe(
    (addresses: Address[]) => {
      observer.next(addresses);
      this.addresses = addresses;
      console.log(this.addresses);
    });

  this.pickupaddress.valueChanges.subscribe(value_entered => {
    console.log(value_entered);
    console.log(this._filterAddresses(value_entered));
    observer.next(this._filterAddresses(value_entered));
  });


});
}

組件 HTML：

              <mat-form-field class="full-width">
                <input matInput placeholder="{{ 'mainapp.shipment.pickupaddress' | translate }}"
                       attr.aria-label="{{ 'mainapp.shipment.pickupaddress' | translate }}" [matAutocomplete]="auto"
                       [formControl]="pickupaddress"
                >
                <ng-template *ngIf="filteredAddresses_pickup | async; else loadingtwee">
                <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayAddress"><!---->
                  <mat-option *ngFor="let pickup of filteredAddresses_pickup | async" [value]="pickup">
                    <span>{{pickup.name}}, {{pickup.postalcode}}, {{pickup.country}}</span>
                  </mat-option>
                </mat-autocomplete>
                </ng-template>
              </mat-form-field>
<div *ngIf="filteredAddresses_pickup | async; else loading">
  <div *ngFor="let a of filteredAddresses_pickup | async">
    <span>{{a.name}}, {{a.postalcode}}, {{a.country}}</span>
  </div>
</div>
<ng-template #loading>
  Textdiv...
</ng-template>
<ng-template #loadingtwee>
  Dropdown...
</ng-template>

我沒有看到 mat-options（它僅用作輸入文本字段），但我確實看到多個跨度在我在輸入字段中輸入內容或 addressChanged 被觸發時進行過濾。

如何解決這個問題？

Answer 1

我通過刪除右側的第二個 mat-autocomplete 解決了這個問題。 我還沒有正確配置第二個，它似乎干擾了第一個（沒有給出錯誤）。

如果您有同樣的問題：刪除所有其他 mat-autocomplete，檢查您的（損壞的）mat-autocomplete 是否有效，然后慢慢重新添加其他的。

Answer 2

在 style.scss 中添加它。 它應該解決這個問題。

.cdk-overlay-container, .cdk-overlay-pane { z-index: 9999 !important; }