angular2 ng-container 如何使用動態 ngTemplateOutletContext

Question

我正在嘗試將 ng-container 與 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導致錯誤

[inputTpl; 中第 11 列的意外標記 {、預期標識符、關鍵字或字符串； { $implicit: child, index: i }]

當我在文檔中使用“上下文：”時，這會導致

無法綁定到“ngTemplateOutletContext”，因為它不是“ng-container”的已知屬性

如果我使用在我的 ts 文件中聲明的對象並設置它而不是我的對象，則一切正常。 此外，這也工作正常：

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

有誰知道，我如何將 ng-container 與在 html 中生成的 *ngTemplateOutlet 和 ngTemplateOutletContext 一起使用？

Answer 1

你有沒有像這樣用[ngTemplateOutletContext]嘗試<ng-container> ？

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

Answer 2

角度 5 的示例。

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


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

閃電戰

Answer 3

也許您應該將依賴項更新到 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 4

調用主模板

<ng-template *ngTemplateOutlet="callMain; context: { $implicit: item }"></ng-template> // can use multiple places

主模板

<ng-template #callMain let-item>
  //use dynamic item object
</ng-template>

Answer 5

您可能必須在聲明當前組件的模塊中導入CommonModule 。