Angular 将数组对象从ng传递到ng模板

Angular 将数组对象从ng传递到ng模板,angular,typescript,Angular,Typescript,角度版本: 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.

角度版本:

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容器”的已知属性。 1.如果“ngTemplateOutletContext”是一个角度指令,则将“CommonModule”添加到此组件的“@NgModule.imports”中

我的应用程序中确实有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/common'导入{CommonModule};
@NGD模块({
声明:[
....
],
进口:[
公共模块,
浏览器模块,
...
]
{{i+1}})。{{row.envName}
{{svc.deviceName}
{{svc.serviceName}

好的,我能解决这个问题

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

{{svc.deviceName}
Ip地址
{{svc.serviceName}
编辑:(添加以下内容)
感谢提供的答案

可能会对您有所帮助。我正试图根据答案使解决方案有效。这是可行的,但当我传递对象时,它不会。