在Angular的范围内嵌套带有图标的跨度

Question

我正在努力将添加按钮的功能更改为一个图标，该图标根据* ngIf语句添加并显示给每个列表项。出于某种原因，我目前所拥有的内容显示了列表中所有项目的添加图标，并且似乎根本没有考虑if语句，我不确定我做错了什么。

这是我原来的工作按钮：

<button *ngIf="selectedItemIndex === -1" class="btn btn-primary" [disabled]="emptyRequiredValue() || isSelectedNameValid(selecteditem.name) === false" (click)="onAddNew()>
   Add
</button>

我已将其转换为跨度，在每个列表项旁边显示一个图标。

<li *ngFor="let item of list; let i = index">
   <span (click)="onSelectedItemClicked(i)">
        {{item.name}}
   </span>
   <span (click)="onAddNew()" *ngIf="selectedItemIndex === -1" class="win-icon win-icon-add"></span>
</li>

正在发生的行为是，一旦我点击列表项，然后列表中的所有项目都会显示添加图标，其中一些项目应该未在第二个范围内传递if语句。

如何调整此项，一旦从列表中选择了一个项目，它将显示该特定项目的添加图标。