Как получить объекты другого API?

Question

В папке assests у нас есть два json-файла с именами 1.customers и 2.appointments .В Компонент списка я отображаю список клиентов, как показано ниже.

Теперь я хочу отобразить назначения этогоконкретный клиент, как показано ниже.

Вот блик стека DEMO

Answer 1

Вместо того, чтобы использовать слишком много логики в ваших шаблонах, вы можете легко объединить данные внутри вашего ContactsService в соответствии с вашими потребностями.

Примером может быть использование combineLatest для получения данных JSON изатем предоставьте вашему клиенту назначения.

@Injectable({ providedIn: 'root' })
export class ContactsService {
  private appointmentsData$ = this.http.get<IAppointments[]>(APPOINTMENTS_URL);
  private customersData$ = this.http.get<ICustomer[]>(CUSTOMERS_URL);


  public readonly customers$ = combineLatest(this.appointmentsData$, this.customersData$).pipe(
    map(([appointments, customers]) => {
      return customers.map(customer =>
      {
        return {
          ...customer,
          appointments: appointments.filter(appointment =>
          {
            return appointment.customerIds.indexOf(customer.id) > -1;
          })
        }
      })
    })
  );



  constructor(private http: HttpClient) { }
}

Затем вы можете использовать наблюдаемую customers$ внутри вашего компонента и использовать async -pipe для его перебора внутри шаблона:

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {
  public customers$ = this.contactsService.customers$;
  constructor(private contactsService: ContactsService) { }
}

<div class="main-div">
  <div *ngFor="let customer of customers$ | async">
    <p><b>Name:</b> {{customer.name}}</p>
    <h3>Appointments</h3>
    <ul>
      <li *ngFor="let appointment of customer.appointments">
        {{ appointment.appointmentName }}
      </li>
    </ul>
  </div>
</div>  

DEMO

Answer 2

Если вы добавите appointments к ListComponent, как вы сделали с customers, вы можете сделать что-то подобное в шаблоне:

<div class="main-div">  
  <div *ngFor="let customer of customers">
    <p><b>Name:</b> {{customer.name}}</p>
    <h3>Appointments</h3>
    <ul>
      <ng-container *ngFor="let a of appointments">
        <li *ngIf="a.customerIds.includes(customer.id)">{{a.appointmentName}}</li>
      </ng-container>
    </ul>
  </div>
</div>