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> </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}
编辑:(添加以下内容)
感谢提供的答案可能会对您有所帮助。我正试图根据答案使解决方案有效。这是可行的,但当我传递对象时,它不会。