SVG元素在角2的*ngFor中没有正确地呈现

Question

我试图根据表中的条件更改图标，当单击对项数组进行排序时，不会为位置已更改的行呈现图标。下面给出了组件html代码。在最初呈现图标时，图标会正常显示，但是当表呈现在某种项数组上时，svg‘影子根’似乎没有根据'xlink:href‘值的变化正确地替换(实际上，在条目数组顺序更改上，ngFor没有生成影子-根元素)。

<tr *ngFor="let item of items; let i = index" class="c-data_table__row">
<td class="u-txt--center">
                      <div class="c-data_table__metric--pri">{{item.type}}</div>
                      <div class="c-data_table__metric--sec"> <small class="c-data_table__metric__count" [ngClass]="{'is-pos' : item.type >= item.typePrev, 'is-neg' : item.type < item.typePrev}"> 
                        <svg *ngIf="item.type >= item.typePrev" class="nc-icon grid-10 outline stroke-3">
                          <use  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/app-icons.svg#nc-icon-tail-up"></use>
                        </svg>
                        <svg *ngIf="item.type < item.typePrev" class="nc-icon grid-10 outline stroke-3">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/app-icons.svg#nc-icon-tail-down"></use>
                        </svg>{{getIncreaseRate(item.type,item.typePrev) | percent}}</small></div>
                    </td>
</tr>

Answer 1

• @Component({ selector：‘InnerSvg’}) @View({ template：<text x="10" y="20">{{ text }}</text> })导出类InnerSvg{ @Input()文本: string；}