如何隐藏列表，如果变量值在Angular 4中未定义

Question

如果列表从JSON检索未定义，请隐藏该列表。任何人都可以帮助。

HTML file:
    <ul>
    <li *ngFor="let item of items | async"><span *ngIf="item?.name">{{item.name}}</span></li>
    </ul>

json文件：

    {
    "chat" : {
      "-Kss3KDwaLDpzAHUKtJN" : {
            "id" : "11",
            "name" : "Shanth",
            "message" : "Hi ..!"
            },
      "-Kss3Kc9c2Ie5IXypqNe" : {
            "id" : "12",
            "name" : "",
            "message" : "Hi .."
            },
      "-KssBwcJhkNCsxUUhsXb" : {
            "id" : "13",
            "name" : "Prasanth",
            "message" : "Hi .."
            }
     }

上面的结果如下：

1. Shanth
2. 
3. Prasanth

我不想显示第二个列表。它应显示为

1. Shanth
2. Prasanth

Answer 1

这将解决您的问题。

<ul>
  <div *ngFor="let item of items">
    <li *ngIf="item.name"><span>{{item.name}}</span></li>
  </div>
</ul>

Answer 2

使用li上的if条件而不是跨度

<li *ngFor="let item of items | async" [style.display]="item.name?'block':'none'"><span >{{item.name}}</span></li>

您也可以使用一个答案中提到的ng-container。请查看Trichetriche的答案。