如何正确封装 *ngFor 原语中使用的一些显示逻辑？

Question

我是 angular 5 的新手，并且仍在尝试从一些好的做法入手。我已经读过这个主题，但我找不到可以帮助我做出选择的东西。

假设我们有这个要显示的基本项目列表。 href 属性依赖于一些逻辑。

我在关联组件中写了一个函数 isOK()，它将列表中的项目作为参数，return 一个布尔值，取决于它的某些属性项目。

<ul>
    <li *ngFor="let item of itemList">
        <a [href]="isOK(item) ? aPath + item.name: '#'"  class="btn btn-default download-button"></a>
    </li>
</ul>

有更好的方法吗？在这种情况下，管道会是更好的方法吗？

Answer 1

我会在组件中使用一个方法，例如

getButtonLink(item: Type) {
    if(this.isOK(item)) {
        return `${aPath}/${item.name}`
    }

    return '#'
}

大大提高了可读性，也更容易测试。

并像

一样使用它

<ul>
    <li *ngFor="let item of itemList">
        <a [href]="getButtonLink(item)"  class="btn btn-default download-button"></a>
    </li>
</ul>

如何正确封装 *ngFor 原语中使用的一些显示逻辑？

How to encapsulate properly some display logic used inside a *ngFor primitives?

ngfor

angular

angular5