如何使用ngFor输出指令？

Question

我在列表中有一些包含其他指令的项目，我想输出指令并让它呈现。 *ngFor正在向浏览器正确呈现值，但不呈现指令。这可能吗？如果我将指令直接添加到此模板，则会呈现，因此我知道页面知道该指令。

<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav clearfix">
               <li *ngFor="#nav of navigationItems">
                     <span [innerHTML]="nav.directive"></span>
               </li>
               <ul>

Answer 1

试试这个，这是你应该在一个组件中引用一个组件的方式，我假设你试图显示一个组件列表。

<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav clearfix">
  <li *ngFor="#nav of navigationItems">
     <mydirective [nav]="nav"></mydirective>
  </li>
<ul>

显示帖子列表的示例模板，

<div class="list-group" *ngFor="#post of posts">
   <post-card [post]="post"></post-card>
</div>

这里的posts-card是我们用来展示帖子展示在卡片格式中的样子的组件。该列表将遍历posts数组，然后对于每个帖子，渲染一个post-card元素，将post元素传递给post-card元素，为其提供渲染自身所需的信息。