使用模板输入变量的 Angular 2 自定义结构指令绑定不起作用

我创建了一个类似于的自定义结构指令ngFor。当我尝试使用它时<template>元素语法时，模板内的绑定有效，但当我使用 * 语法时，绑定无效。

   <!-- working -->
    <template edit [editOf]="values" let-val="val">
      <table >
        <span>This is using template syntax {{val}}</span>
      </table>
    </template>
    
    <!-- not working -->
      <table *edit="let val1 of values">
        <span>This uses star syntax {{val1}}</span>
      </table>

这里是链接 http://plnkr.co/edit/ON0YvkJOsgiaWYG11mcb?p=preview对于这个问题。

我究竟做错了什么？

Update:我想，现在我明白是怎么回事了。这let-val属性设置不正确val用于绑定的对象，但我需要整个对象。所以let-val不应在模板中分配任何值，然后我必须使用用作 viewRef 中绑定源的对象来更新 context.$implicit 。

Working plnkr在这里。 http://plnkr.co/edit/yi58UGgPPY71J4co5Mhx?p=preview

感谢@robisim74

尝试这个：

import {  ChangeDetectorRef,
  Directive,
  Input,
  DoCheck,
  IterableDiffer,
  IterableDiffers,
  TemplateRef,
  ViewContainerRef,
  EmbeddedViewRef} from "@angular/core";

@Directive({
  "selector":"[edit][editOf]"
})
export class EditableTableDirective implements DoCheck {

  private collection:any;
  private differ:IterableDiffer;
  private viewMap:Map<any,EmbeddedViewRef> = new Map<any,EmbeddedViewRef>();

  constructor(
    private changeDetector:ChangeDetectorRef,
              private differs:IterableDiffers,
              private template:TemplateRef,
              private viewContainer:ViewContainerRef){
  }

  @Input() set editOf(coll:any){
    this.collection = coll;
    if (coll && !this.differ) {
      this.differ = this.differs.find(coll).create(this.changeDetector);
    }
  }

  ngDoCheck() {
    if (this.differ) {
      const changes = this.differ.diff(this.collection);
      if (changes) {
        changes.forEachAddedItem((change) => {
          const view = this.viewContainer.createEmbeddedView(this.template, change.item);
          view.context.$implicit = change.item;
          this.viewMap.set(change.item, view);
        });
        changes.forEachRemovedItem((change) => {
          const view = this.viewMap.get(change.item);
          const viewIndex = this.viewContainer.indexOf(view);
          this.viewContainer.remove(viewIndex);
          this.viewMap.delete(change.item);
        });
      }
    }
  }

}

然后修正模板：

<table *edit="let item of values">
   <span>This uses star syntax {{item.val}}</span>
</table>  

我关注了这篇文章：http://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html http://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html