如何使用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數組，然后為每個post渲染一個post-card元素，將post元素傳遞到post-card元素，以為其提供呈現自身所需的信息。