typescript - 각도 ts - ngfor에서 로컬 데이터가있는 컴포넌트 가져 오기

Angular2를 처음 접했고 현재 ngFor 루프에서 구성 요소를 가져 오는 데 어려움을 겪고 있습니다.

ngFor 루프에서 데이터가있는 컴포넌트를 가져올 때 ngFor에서 사용되는 로컬 변수가 아닌 .ts 파일의 값을 확인하는 것으로 보입니다. 내가하고 싶은 일은 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.component에 ngFor에서숙박 (.costs)을 보내려면 어떻게합니까? 위의 코드를 사용하면 원치 않는 Accommodations.components.ts 파일에서 "accommodation"이라는 변수를 찾기 때문에 cost.component에서 비용은 항상 정의되어 있지 않습니다.