gpt4 book ai didi

angular - 如何使用 ngForTemplate 包装模板?

转载 作者:太空狗 更新时间:2023-10-29 17:48:48 27 4
gpt4 key购买 nike

我尝试使用 ngForTemplate 为自定义模板制作 ListView 组件

list-view.component.html

<div class="list-view">
<template ngFor [ngForOf]="items" [ngForTemplate]="template">
</template>
</div>

list-view.component.ts

@Component({
selector: 'm-list-view',
styleUrls: ['./list-view.component.less'],
templateUrl: './list-view.component.html'
})

export class ListViewComponent {
@Input() items: any[] = [];

@ContentChild(TemplateRef)
template: any;
}

当我这样使用它时:

<m-list-view [items]="categories">
<template let-item="$implicit">
**some HTML markup**
</template>
</m-list-view>

结果是:

<m-list-view>
<div class="list-view">
**some HTML markup**
**some HTML markup**
**some HTML markup**
...
</div>
</m-list-view>

但我需要这个:

<m-list-view>
<div class="list-view">
<div class="list-view-item">**some HTML markup**</div>
<div class="list-view-item">**some HTML markup**</div>
<div class="list-view-item">**some HTML markup**</div>
...
</div>
</m-list-view>

我应该如何将每个 ListView 项模板包装在 div.list-view-item 中?

最佳答案

更新 Angular 5

ngOutletContext 已重命名为 ngTemplateOutletContext

现在建议您使用以下语法:

<div class="list-view">
<div class="list-view-item" *ngFor="let item of items">
<ng-container *ngTemplateOutlet="template; context: item">
</ng-container>
</div>
</div>

另见 https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原创

<div class="list-view">
<div class="list-view-item" *ngFor="let item of items">
<template [ngTemplateOutlet]="template" [ngOutletContext]="item"></template>
</div>
</div>

另见 https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html

关于angular - 如何使用 ngForTemplate 包装模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39232659/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com