SVG 元素在 Angular 2 中的 *ngFor 内无法正确呈现答案

【问题标题】：SVG element not rendering properly inside *ngFor in Angular 2SVG 元素在 Angular 2 中的 *ngFor 内无法正确呈现
【发布时间】：2018-09-28 06:50:43
【问题描述】：

我正在尝试根据表格中的条件更改里面的图标，当单击时对项目数组进行排序时，不会为位置已更改的行呈现图标。组件 html 代码如下所示。在初始渲染时，图标正确出现，但似乎当表格在某种项目数组上渲染时，svg 'shadow-root' 没有根据'xlink正确替换： href'值变化（实际上是在items数组顺序变化上，ngFor没有生成shadow-root元素）。

<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>

【问题讨论】：

标签： angular svg ngfor angular-ng-if

【解决方案1】：

@Component({ selector: 'g[inner-svg]' }) @View({ template: <text x="10" y="20">{{ text }}</text> }) export class InnerSvg { @Input() text: string; }

【讨论】：

您能否重新检查/改写您的答案，我无法正确理解。