相关疑难解决方法(0)

Angular - ng-template,其中ngIf内的参数位于ngFor内

我正在尝试构建此模板:

<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

很高兴知道这个问题是否有多种解决方案.

angular-template ng-template angular

31
推荐指数
1
解决办法
2万
查看次数

无法使ngTemplateOutlet工作

我正在尝试在Angular2中构建一个列表组件,它获取组件用户的项目字段的项目,列和模板.所以我试图使用ngTemplateOutletngOutletContext(我读过的是实验性的).但我无法让它发挥作用.

这是一个简化的组件,用于演示我要做的事情:

<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)

angular

23
推荐指数
2
解决办法
2万
查看次数

在Angular 2模板中传递变量

有没有办法可以将变量传递给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)

我怎样才能获得模板打印namefoo

javascript angular

8
推荐指数
3
解决办法
1万
查看次数