Angular 2使用dynamic定制自动完成显示<；天然气含量>；

我正在创建一个“自动完成”组件，并试图找出如何处理项目的“显示”。我尝试过使用

ng content

并呈现项目，但失败了。我想要的是一种方法，让我们

ng内容

并将“数据”传递给子内容。当我试图传递内容时，它总是失败，并说“项”未定义

<input-auto-complete
    [data]="searchResults"
    (onItemSelected)="onItemSelected($event)"
    (onSearch)="onSearch($event)">
       {{item.Name}}
</input-auto-complete>

{{item.Name}

简言之，我正在创建一个可以自动完成/搜索的输入，但我找不到一个好方法让人们自定义他们想要显示结果的方式

我正在使用ionic，但我的模板如下所示：

<ion-searchbar
           [(ngModel)]="search"
            (ionInput)="updateSearch()"
            (ionCancel)="dismiss()">
</ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of data"
          tappable
          (click)="onItemSelected(item)">
         <!-- i found a way to do something like this where they can pass a function to display -->
         <ng-container *ngIf="!display">
            <pre>{{item|json}}</pre>
          </ng-container>
          <ng-container *ngIf="display">
            {{display(item)}}
          </ng-container>


          <!-- could not get this to work this would be my preference allow people to put whatever in here and it would get rendered and passed "item" -->
         <!-- if i enable this it breaks  <ng-content ></ng-content>   ->
  </ion-item>
</ion-list>

{{item | json}}
{{显示（项目）}
有趣的问题。不幸的是，我没有一个解决方案可以提供，但我在这里发布这篇文章（vs在评论中）的空间和格式

您的代码不起作用，因为
项
仅在子项（自动完成）的上下文中定义，并在父项的上下文中进行评估。因此，在父级中计算
item.Name
时，
item
未定义

<input-auto-complete
    [data]="searchResults"
    (onItemSelected)="onItemSelected($event)"
    (onSearch)="onSearch($event)">
       {{item.Name}}
</input-auto-complete>

我看不出一个简单的解决办法。基本上，您希望能够编译一个字符串，
元素中的内容，就像它是另一个模板的一部分一样，
的模板

以下是一些我希望能有所帮助的想法（不幸的是，没有一个是理想的）：

1。向父模板公开子模板的属性和方法

您可以通过在子级上声明一个：



{{item.name}


注意。我还没有测试过这个。请注意，
数据
是异步的，可能不是最初定义的

2。用自定义语法替换Angular的插值

比如：


__项目__

然后在child中，我将解析上面的字符串，用它的实际值搜索并替换
\uuuu ITEM\uuu
。非常低级，有点反模式（直接DOM操作是不受欢迎的），感觉就像是重新发明轮子

3。将
ng内容
替换为
TemplateRef

我的理解是，你想让你的用户提供一个蓝图，说明如何在自动完成建议中显示每个项目。我想您会希望动态地重复提供的标记

我不知道你能用
ng内容轻松做到这一点（比如你不能
）。使用
TemplateRef
会更容易

要获取作为TemplateRef的项目“blueprint”标记，请将其包装在
标记中：


__项目__

您需要使用以下内容标识模板：


模板变量，即
（这样做）
或自定义指令，即
（这样做）

然后，在自动完成组件中，您可以使用
@ContentChild
装饰器获得模板：


使用模板变量名（引号）：
@ContentChild（'itemTemplate'）itemTpl
或者指令类（无引号）：
@ContentChild（itemTemplateDir）itemTpl

最后，您可以根据自己的规则使用打印模板。
项目在呈现时可能尚未初始化。您是否尝试过
项。？Name
我现在没有使用任何“异步”数据。我有
searchResults
硬编码到数组中。