Question

我有一个像<div> {{ Hello }} , {{ Helo2 }} </div>这样的标记，我想在,为空时隐藏Hello and Hello2。任何人都可以帮助我Angular4。

Answer 1

您可以使用自定义方法{{ join(Hello, Hello2) }}。

其中：

function join（val1，val2）{


var list = [];

if（val1＆amp;＆amp; val1.length！== 0）list.push（val1）;

if（val2＆amp;＆amp; val2.length！== 0）list.push（val2）;

return list.join（＆＃34;，＆＃34;）;


}

Answer 2

您可以使用Angulars ng-container

Angular <ng-container>是一个没有的分组元素干扰样式或布局，因为Angular没有把它放入 DOM。

<div> 
   {{Hello}}
   <ng-container *ngIf="Hello && Helo2"> , </ng-container>
   {{Helo2}}
</div>

Answer 3

 `<div> {{ Hello }} <span *ngIf="Hello || Helo2">,</span> {{ Helo2 }} </div>`

Answer 4

只要把＃34;，＆＃34;在* ngIf：

的范围内

<div> {{Hello}} 
    <span *ngIf="Hello && Hello2"> , </span>
      {{Hello2}}
</div>

Answer 5

不要忘记，您始终可以在模板文字中调用函数。

<p>Hello {{commaSeperate("FirstName", "LastName")}}</p>

public commaSeperate(first, second){
  if(first == null)
    return;

  first = first == null ? "" : first;
  second = second == null ? "" : second;

  return `${second}${second && first ? ',' : ''} ${first}`;
}

https://stackblitz.com/edit/angular-ugadmr

这将返回：

Hello LastName, FirstName时{p> LastName && FirstName != null Hello FirstName时的FirstName != null && LastName == null 当Hello 时FirstName == null {仅以姓氏问候某人是没有意义的。）

Answer 6

    <p>Hello {{joinNonEmpty(", ", "FirstName", "LastName")}}</p>

    joinNonEmpty(separator, ...values) {
        return values.filter(x => x).join(separator);
    }

标记为空时隐藏，（逗号）

6 个答案: