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>

如何在 ngFor 中发送 let accommodation(.costs) 到 costs.component？使用上面的代码，成本在 costs.component 中始终未定义，因为它在我不想要的 accommodations.components.ts 文件中查找名为 "accommodation" 的变量。

Answer 1

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

accommodation 是 for 循环的本地模板引用，您正在使用 for 循环范围之外的引用，您需要将其放在 for 循环中以便待定义的住宿

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

Angular ts - importing components with local data from ngFor

typescript

ngfor

angular