Question

我正在尝试根据表中的条件更改内部图标，当单击项目数组时，不会为位置已更改的行呈现图标。组件html代码如下。在初始渲染时，图标正确显示，但似乎当表格在项目数组上呈现时，svg' shadow-root '未根据' xlink正确替换： href '值更改（实际上对于items数组顺序更改， shadow-root 元素不是由 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：'g [inner-svg]'}）@View（{template：<text x="10" y="20">{{ text }}</text>}）导出类InnerSvg {@Input（）text：string; }

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

1 个答案: