angular2 нг-контейнер, как использовать динамический ngTemplateOutletContext

Question

Я пытаюсь использовать нг-контейнер с NgTemplateOutlet (https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html)

 <div *ngFor="let child of children; let i=index"> 
     <ng-container *ngTemplateOutlet="inputTpl; { $implicit: child, index: i }"></ng-container> 
    </div> 

результаты Thie в ошибке

Неожиданный маркер {, ожидаемый идентификатор , ключевое слово или строку в столбце 11 в [inputTpl; {$ Неявный: ребенок, индекс: я}]

Когда я использую 'контекст:' как в документации, это приводит к

не может связываться с 'ngTemplateOutletContext', поскольку ISN» t известное свойство «ng-container»

Если я использую объект, объявленный в моем ts-файле, и устанавливаю его вместо моего объекта, все работает нормально. Кроме того, это также работает отлично:

 <div *ngFor="let child of children; let i=index" class="form-group"> 
     <template [ngTemplateOutlet]="inputTpl" [ngOutletContext]="{ $implicit: child, index: i }" /> 
    </div> 

Кто-нибудь знает, как я могу использовать нг-контейнер * ngTemplateOutlet и ngTemplateOutletContext генерируется в HTML?

Answer 1

Возможно, вам следует обновить свои зависимости до 2,4?

"dependencies": { 
    "@angular/common": "~2.4.3", 
    "@angular/compiler": "~2.4.3", 
    "@angular/core": "~2.4.3", 
    "@angular/forms": "~2.4.3", 
    "@angular/http": "~2.4.3", 
    "@angular/platform-browser": "~2.4.3", 
    "@angular/platform-browser-dynamic": "~2.4.3", 
    "@angular/platform-server": "~2.4.3", 
    "@angular/router": "~3.4.3", 
    "@angularclass/conventions-loader": "^1.0.2", 
    "@angularclass/hmr": "~1.2.2", 
    "@angularclass/hmr-loader": "~3.0.2", 
    "core-js": "^2.4.1", 
    "http-server": "^0.9.0", 
    "ie-shim": "^0.1.0", 
    "jasmine-core": "^2.5.2", 
    "reflect-metadata": "^0.1.9", 
    "rxjs": "~5.0.2", 
    "zone.js": "~0.7.4" 
    }, 

Answer 2

ли вы попробовать <ng-container> с [ngTemplateOutletContext], как это?

<ng-container 
    [ngTemplateOutlet]="inputTpl" 
    [ngTemplateOutletContext]="{ $implicit: child, index: i }" 
> 
</ng-container> 

Answer 3

Пример для углового 5.

<ng-container [ngTemplateOutlet]="optionTemplate.template" [ngTemplateOutletContext]="{option:option}"> 
</ng-container> 


<p-auto-complete property='searchText' [options]="options"(onChnge)="select($event)"> 
     <ng-template pOptionTemplate let-option="option"> 
      <div> 
       //... 
      </div> 
     </ng-template> 
</p-auto-complete>