首页 文章

将数组对象传递给ng-for的ng-template

提问于
浏览 次
0

角度版本：

Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack: 3.10.0

当我将一个对象从ng-for传递给ng-template时，我收到错误'无法绑定到'ngTemplateOutletContext'，因为它不是'ng-container'的已知属性 . 1.如果'ngTemplateOutletContext'是Angular指令，则将'CommonModule'添加到此组件的'@NgModule.imports' .

我的app.module中有CommonModule

import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [
    ....
  ],
  imports: [
    CommonModule,
    BrowserModule,
    ...
    ]


    <tr grid-item *ngFor="let row of environs; let i = index">
        <td width="30%">{{i+1}} ). {{row.envName}}</td>
        <ng-container *ngIf="row.services?.length > 0">
            <ng-container *ngTemplateOutlet="deviceBlock" 
                [ngTemplateOutletContext]="{svc:row.services[0]}"></ng-container>
        </ng-container>

        <div *ngFor="let dev of row.services; let j = index">
            <ng-container *ngTemplateOutlet="deviceBlock" 
                [ngTemplateOutletContext]="{svc:dev}"></ng-container>
        </ng-container>
        </div>
    </tr>
<ng-template #deviceBlock let-svc='svc'>
    <td width="30%">{{svc.deviceName}}</td>
    <td width="20%">{{svc.serviceName}}</td>
</ng-template>
angular typescript

1 回答

  • 1

    好的，我能解决这个问题

    <ng-container [ngTemplateOutlet]="deviceBlock" 
            [ngTemplateOutletContext]="{svc:row.services}"></ng-container>
        <div *ngFor="let dev of row.services; let j = index">
                <ng-container [ngTemplateOutlet]="deviceBlocks" 
                    [ngTemplateOutletContext]="{dev:dev}"></ng-container>
        </div>

<ng-template #deviceBlock let-svc='svc'>
    <ng-container *ngIf="svc?.length > 0">
            <ng-container [ngTemplateOutlet]="tableRow" 
                [ngTemplateOutletContext]="{svc:svc[0]}"></ng-container>
    </ng-container>
</ng-template>
<ng-template #deviceBlocks let-dev='dev'>
    <tr>
        <td>&nbsp;</td>
        <ng-container [ngTemplateOutlet]="tableRow" 
        [ngTemplateOutletContext]="{svc:dev}"></ng-container>
    </tr>
</ng-template>
<ng-template #tableRow let-svc='svc'>
    <td width="30%">{{svc.deviceName}}</td>
    <td width="20%">Ip Address</td>
    <td width="20%">{{svc.serviceName}}</td>
</ng-template>

    编辑:(添加以下）感谢提供的答案here

    回复于

相关问题