СЦЕНАРИЙ: У меня есть компонент с именем list, который отображает все customers в списке. В этом списке я написал такие условия:
1) По умолчанию будет выбран 1-й list-item(Ex customer 1), а выбранный list-item(Ex customer 1) будет передан другому компоненту с именем display.
2) Затем при нажатии на любой list-item(i,e customer) выбранный элемент списка также испускается display компонент. Как на изображениях ниже:
код компонента списка контактов:
HTML
<mat-selection-list>
<mat-list-option [ngClass]="{selected : currentContact && contact.Name == currentContact.Name}" *ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)">{{ contact.Name }} </a>
</mat-list-option>
</mat-selection-list>
TS
import { Component Input,EventEmitter,Output} from '@angular/core';
import { ICustomer} from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';
@Component({
selector: 'drt-customers-list',
templateUrl: './customers-list.component.html',
styleUrls: ['./customers-list.component.scss'],
})
export class CustomerListComponent {
public customers: ICustomer[] ;
public currentContact: IContact;
@Output()
public select = new EventEmitter();
constructor(public customersService: CustomersService,) {}
public async ngOnInit(): Promise<void> {
this.customers = await this.customersService.getCustomersList('');
this.customerRefreshed();
}
public ngOnChanges(changes: SimpleChanges): void {===>To emit 1st contact by default
if (this.contacts && this.contacts.length > 0) {
this.currentContact = this.contacts[0];
this.select.emit(this.currentContact);
}
}
public customerRefreshed() { ====> To refresh the list after updating
this.customersService.customerUpdated.subscribe((data: boolean) => {
if(data) {
this.customers = await this.customersService.getCustomersList('');
}
});
}
public onSelect(contact: IContact): void {===> To emit contact on click
this.select.emit(contact);
}
}
Теперь у меня есть еще один компонент для update the contacts. Там я обновлю contact, выполнив операцию PUT, затем обновлю contact-list еще раз. Чтобы увидеть изменения.
код компонента обновления контакта:
public updateCustomer(): void {
this.someCustomer = this.updateForm.value;
this.customersService.UpdateCustomer(this.someCustomer, this.someCustomer.id).subscribe(
() => { // If POST is success
this.customersService.customerUpdated.next(true);
this.successMessage();
},
(error) => { // If POST is failed
this.failureMessage();
}
);
}
файл служб:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ICustomer} from 'src/app/models/app.models';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class CustomersService {
private baseUrl : string = '....Url....';
public customerUpdated: Subject<boolean>;
constructor() {
this.customerUpdated = new Subject<boolean>();
}
public async getCustomersList(): Promise<ICustomer[]> {
const apiUrl: string = `${this.baseUrl}/customers`;
return this.http.get<ICustomer[]>(apiUrl).toPromise();
}
public UpdateCustomer(customer: ICustomer, id: string): Observable<object> {
const apiUrl: string = `${this.baseUrl}/customers/${id}`;
return this.http.post(apiUrl, customer);
}
}
Теперь проблемы, предположим, если я select/click 2-й list-item(Customer 2) для обновления, то после обновления list-item(Customer 1) выбран по умолчанию, как это:
Но после обновления ранее нажатый list-item(Customer 2) должен снова быть в состоянии selected, даже после обновления list следующим образом :
