首页 > 解决方案 > 如果值为空,如何不使用管道

问题描述

我在使用 Pipe - split 的地方得到了简单的表格,如下所示:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'split' })

export class SplitRecipientsPipe implements PipeTransform {
  transform(rec: any) {
    return rec
      .split(',')
      .filter(Boolean)
      .map(r => r.trim());
  }
}

我的桌子看起来像

<tbody>
    <tr *ngFor="let r of recipients.recipients | split; let i = index">
            <td>{{r}}</td>
                <td style="width: 60px"><button class="btn btn-sm btn-danger"
                  (click)="_delete(r, recipients, aliases)">Delete</button></td>
        </tr>
</tbody>

它在r不为空但r为空时工作正常 - 拆分管道仍然有效并产生问题。

我怎样才能只在r不为空时调用这个管道?

标签: angular

解决方案


像这样返回

return rec ? rec.split(',').filter(Boolean).map(r => r.trim()) : [];

如果迭代不是数组,您的 *ngFor 也会出错


推荐阅读