I am using an auto-complete so users can select an address (or search for it and select it).
On the same page, users can add addresses. After they add the address, I want to add the address to the mat-autocomplete.
My issue is currently that the mat-autocomplete isn't showing any options. For troubleshooting I setup a div which uses *ngFor to show the addresses and that works and updates.
// component (left out some code)
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));
});
});
}
component 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>
I don't see mat-options (it only works as an input text field) but I do see multiple spans who filter when I enter something in the input field or when addressChanged gets triggered.
How to fix this?