Question

我有一个将文章对象返回到我的ViewModel的场景，如下所示：

article: { authors: [{id: 11, name: 'Bob Smith'}, {id: 22, name: 'John Jones'}]; }

我有一个要求，我需要写出这样的显示：“Bob Smith，John Jones撰写”

上面的作者姓名应该是在点击时根据相关作者ID重新加载页面显示的网址。如何防止最后一个逗号显示在csv中？以下模板代码中的* ngIf逻辑似乎不起作用：

<div>
    <span>Written by </span>
    <span *ngFor="let author of article.Authors; let last=last">
        <a href="#" onclick="return false;" (click)="reloadByAuthorId(1134)">
            {{author.Name}} 
        </a>
        <span *ngIf="!last">,</span>
    </span>
</div>

更新

我想出了如何实现csv最后一个逗号逻辑。我使用以下声明更新了上面的原始代码示例：

let last=last

但是，模板在逗号前用空格渲染。知道如何更新模板以删除这个额外的空间吗？

Answer 1

你可以通过CSS调整（填充，边距和字体大小...... https://stackoverflow.com/a/25667514），但也是这样：

  <span  *ngIf="!last">{{author.name}},</span>
  <span  *ngIf="last">{{author.name}}</span>

<强> **DEMO **

如何在ng模板中实现csv绑定？

1 个答案: