Angular ts - 使用ngFor的本地數據導入組件

Question

我是Angular2的新手，我目前正在努力在ngFor循環中導入組件。

看來，當您在ngFor循環中導入包含數據的組件時，它會檢查.ts文件中的值，而不是ngFor中使用的局部變量。我想要做的是將ngFor中使用的變量發送到下一個組件。

accommodations.component（父視圖）

TS：

import { Component, Input } from '@angular/core'; 
import { AccommodationModel } from '../../../../models/reservations/accommodation-model'; 

@Component({ 
    selector: 'reservations-reservation-accommodations', 
    templateUrl: './accommodations.component.html' 
}) 

export class AccommodationsComponent { 
    constructor() { } 

    @Input() accommodations: AccommodationModel[]; 
} 

HTML：

<div class="card-block"> 
       <ngb-tabset> 
        <ngb-tab *ngFor="let accommodation of accommodations" title="{{accommodation.arrivalDate}}"> 
         <ng-template ngbTabContent> 
          <div class="table-responsive"> 
           <table class="table table-condensed table-bordered table-striped content-divider-up"> 
            <thead> 
             <tr> 
              <th>ArrivalDate</th> 
             </tr> 
            </thead> 
            <tbody> 
             <tr> 
              <td> 
               {{accommodation.arrivalDate}} 
              </td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </ng-template> 
        </ngb-tab> 
       </ngb-tabset> 

       <reservations-reservation-accommodations-costs [costs]="accommodation.costs"></reservations-reservation-accommodations-costs> 
      </div> 

costs.component（子視圖）

TS：

import { Component, Input } from '@angular/core'; 
import { CostModel } from '../../../../../models/reservations/cost-model'; 

@Component({ 
    selector: 'reservations-reservation-accommodations-costs', 
    templateUrl: './costs.component.html' 
}) 

export class CostsComponent { 
    constructor() { } 

    @Input() costs: CostModel[]; 
} 

HTML：

<div class="row content-divider-up"> 
    <div class="col"> 
     {{costs.length}} 
    </div> 
</div> 

如何發送讓住宿（.costs）在ngFor到costs.component？通過上面的代碼，costs.component中的成本總是未定義，因爲它在我不想要的amenities.components.ts文件中查找名爲「accommodation」的變量。

Answer 1

<reservations-reservation-accommodations-costs [costs]="accommodation.costs"></reservations-reservation-accommodations-costs> 

住宿是for循環的局部模板參考，使用的是被定義

的for循環，你需要把這個裏面的for循環，以便住宿範圍之外的參考