Angular ts-从ngFor导入具有本地数据的组件

Question

I'm relativly new to Angular2 and i'm currently struggling with importing components in ngFor loop.

It appears that when you import components with data in ngFor loops, it checks for values in the .ts file and not the local variable used in ngFor. What I want to do is to send the variable used in ngFor to the next component.

accommodations.component (parent view)

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 (child view)

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>

How do I send let accommodation(.costs) in ngFor to costs.component ? With the code above, costs is always undefined in costs.component because its looks for a variable named "accommodation" in the accommodations.components.ts file which i don't want.

Answer 1

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

Accommodation是for循环的本地模板引用，并且您正在使用for循环范围之外的引用，因此需要将该引用放入for循环中才能定义适应