我正在尝试构建此模板:
<ul>
<li *ngFor='let link of links'>
<ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>
</li>
</ul>
<ng-template #simpleLink>
...
{{ link.some_property }}
</ng-template>
<ng-template #complexLink>
...
{{ link.some_property }}
</ng-template>
Run Code Online (Sandbox Code Playgroud)
问题是在ng-template中未定义链接变量,因此我得到访问未定义的'some_property'的错误.
我很想知道如何将链接变量从ngFor传递到ng-template
很高兴知道这个问题是否有多种解决方案.
我正在尝试在Angular2中构建一个列表组件,它获取组件用户的项目字段的项目,列和模板.所以我试图使用ngTemplateOutlet和ngOutletContext(我读过的是实验性的).但我无法让它发挥作用.
这是一个简化的组件,用于演示我要做的事情:
<div *ngFor="let item of items>
<span *ngFor="let column of columns>
<template [ngOutletContext]="{ item: item }"
[ngTemplateOutlet]="column.templateRef"></template>
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
以下是组件的用法:
<my-component [items]="cars" [columns]="carColumns">
<template #model>{{item.model}}</template>
<template #color>{{item.color}}</template>
<template #gearbox>{{item.gearbox}}</template>
</my-component>
Run Code Online (Sandbox Code Playgroud)
以下是示例数据:
cars = [
{ model: "volvo", color: "blue", gearbox: "manual" },
{ model: "volvo", color: "yellow", gearbox: "manual" },
{ model: "ford", color: "blue", gearbox: "automatic" },
{ model: "mercedes", color: "silver", gearbox: "automatic" }
];
carColumns = [
{ templateRef: "model" },
{ …Run Code Online (Sandbox Code Playgroud) 有没有办法可以将变量传递给Angular2中的模板?
假设我有以下代码:
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner"</ng-container>
</div>
---------------
<ng-template #inner>
{{ foo.name }}
</ng-template>
Run Code Online (Sandbox Code Playgroud)
我怎样才能获得模板打印name的foo?