Доступ к другому объекту внутри ngFor

Question

У меня есть mat-grid-list, который проходит через некоторые аукционы, которые я создал для создания различных mat-grid-плиток. Внутри моего аукциона у меня есть CarId и BidId. Внутри моего ngFor = "разрешить аукцион аукционов" я хочу получить доступ к этим идентификаторам и использовать их для отображения CarType и суммы ставки из объектов Car и Bid.

В следующем коде я хотел бы отключить "0" в:

{{allCars [0] .CarType}} {{ставки [0] .Amount}}

Переключите его, чтобы я мог получить доступ и использовать {{auction.CarId}} и {{auction.BidId}}, чтобы подключить правильный тип автомобиля и сумму ставки к мат-сетке. У вас есть идеи, как этого добиться?

    <div class="col-md-8 col-sm-12">
      <mat-grid-list cols={{breakpoint}} rowHeight="150px" gutterSize="1" (window:resize)="onResize($event)">
        <mat-grid-tile *ngFor="let auction of auctions"
                       [colspan]="1"
                       [rowspan]="1"
                       [style.border]="'1px double black'"
                       [style.background]="lightblue">


          <div class="text-inside-grid">
            Bil type:
            {{allCars[0].CarType}}
            <br />
            Start dato:
            {{auction.StartDate.toLocaleTimeString()}}
            {{auction.StartDate.toLocaleDateString()}}
            <br />
        Slutt dato:
        {{auction.StartDate.toLocaleTimeString()}}
        {{auction.EndDate.toLocaleDateString()}}
        <br />
        Nåværende bud:
        {{bids[0].Amount}}
        <li><a href="auction/{{auction.Id}}">Se auksjon</a></li>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

структура данных:

interface Car {
  Id: number;
  CarType: string;
  flag: string;
  LicensePlate: string;
  KilometersDriven: number;
  Equipment: Array<Equipment>;
  FuelTypeId: number;
  Seats: number;
  GearTypeId: number;
  CityId: number;
  ColourId: number;
  Gears: number;
}

interface Auction {
  Id: number;
  Active: boolean;
  StartDate: Date;
  EndDate: Date;
  CarId: number;
}

interface Bid {
  AuctionId: number;
  Amount: number;
}

Answer 1

Вы можете просто реализовать две функции в своем компоненте, которые извлекают свойство объекта / объекта по его идентификатору из массива.

Компонент:

public getCarType(carId: number): string {
  return this.allCars.find(car => car.Id === carId).CarType;
}

public getBid(auctionId: number): number {
  return this.bids.find(bid => bid.AuctionId === auctionId).Amount;
}

И затем используют функции вВаш шаблон:

Bil type: {{getCarType(auction.CarId)}}

Nåværende bud: {{getBid(auction.Id)}}