Wie das Context-Objekt an die eingebettete View übergeben wird, die mit der ng-template erstellt wurde

Question

Ich habe noch kein Code-Snippet gefunden und das Dokument ist zu kurz. Also meine Frage ist, wie param zu einer ng-Vorlage und wie man den Index zurück erhalten? Intuitiv sollte das folgende funktionieren, aber es wirft nur "undefined". Jede Hilfe wird geschätzt.

@ViewChild("vc", { read: ViewContainerRef }) vc: ViewContainerRef; 
    @ViewChild("tpl") tpl: TemplateRef<any>; 

    ngAfterViewInit() { 
    this.vc.createEmbeddedView(this.tpl, 
     new Book("The Complete Guide to Angular 4", 55)); 
    this.vc.createEmbeddedView(this.tpl, 
     new Book("Building Web Components with TypeScript and Angular 4", 48)); 
    } 
    deleteBook(index) { 
    console.log("deleteBook index ", index); 
    } 

<div class="container"> 
    <div class="card-deck"> 
     <ng-container #vc></ng-container> 
    </div> 
    <ng-template #tpl let-book="book" let-index="index"> 
     <div class="card"> 
      <img class="card-img-top" src="..." alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Title: {{book.title}}</h4> 
       <p class="card-text">Price: {{book.price}}</p> 
       <button type="button" class="btn btn-primary" (click)="deleteBook(index)">Delete</button> 

      </div> 
     </div> 
    </ng-template> 
</div> 

Answer 1

Sie benötigen ein Objekt mit dem Schlüssel zu übergeben, die die let-keyname Syntax entsprechen:

<ng-template #tpl let-book="book" let-index="index"> 
    ... 

this.vc.createEmbeddedView(this.tpl, { 
    book: new Book("The Complete Guide to Angular 4", 55), 
    index: someIndex 
});