Чтобы выделить выбранный элемент списка после обновления компонента

PGH спросил: 11 марта 2019 в 07:31 в: angular

СЦЕНАРИЙ: у меня есть компонент с именем list, который отображает все customers в списке. В этом списке я написал следующие условия:

1) По умолчанию будет выбран 1-й list-item(Ex customer 1), а выбранный list-item(Ex customer 1) будет отправлен в другой компонент с именем .

2) Затем при нажатии на любой display выбранный элемент списка также испускается компонент list-item(i,e customer). Как и в изображениях ниже:

код компонента списка контактов:

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>

CSS

.selected {
  background-color:gray;
}

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

Теперь у меня есть еще один компонент для display, Там я обновлю выбранный update the contacts, выполнив операцию contact, затем снова обновлю PUT. Чтобы увидеть изменения.

обновить код компонента контакта:

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

Теперь проблемы. Предположим, если я contact-list 2-й select/click для обновления, то после обновления list-item(Customer 2) по умолчанию выбрано, например, так:

но после обновления list-item(Customer 1)> list-item(Customer 2)

0 ответов