Question

我有一个垫子网格列表，可通过我为制作不同的垫子网格瓷砖而进行的一些拍卖而引人注目。在我的拍卖中，我有CarId和BidId。在我的ngFor =“ let拍卖拍卖”中，我想访问这些ID，并使用它们显示Car和Bid对象的CarType和出价金额。

在以下代码中，我想将“ 0”切换为：

切换它，以便我可以访问并使用{{auctions.CarId}}和{{auctions.BidId}}将正确的汽车类型和出价金额连接到mat-grid-tile。您对如何实现这一目标有任何想法吗？

    <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

您只需在组件中实现两个函数，即可通过数组中的ID检索对象/对象属性。

组件：

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

访问ngFor中的其他对象

1 个答案: