如何基于Angular Mat-options中的某些条件在下拉列表中列出选项？

Question

我有一系列的应用程序。在这里，我需要在下拉列表中列出应用程序名称。但是某些应用程序名称为null。所以在下拉列表中我也得到了那些应用程序，因为它的名称并不只是显示空白选项。 有什么办法可以避免那些应用程序名称在下拉列表中列为选项？

我的代码如下：

app.component.html

<span style="font-size: 15px">Apps</span>
<mat-select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" style="width:1%">
     <mat-option *ngFor="let app of apps" [value]="app.id">
             {{app.name}}
     </mat-option>
</mat-select>

app.component.ts

getApps(loggedInUser) {           
    this.processAdminServices.getApps(loggedInUser)
         .subscribe(data =>{ 
                let appsData = data["data"];
                this.apps = appsData;
                console.log("APPS LIST ARE AS FOLLOWS:");
                console.dir(this.apps);
          },
          errorCode =>  {
               this.statusCode = errorCode
          });
 }

应用数组：

在这里，我不想在下拉列表中将名称为null的应用程序列为选项。

如何实现？请提供解决方案。

感谢与问候，

希尔帕·库尔卡尼

Answer 1

您可以使用 ng-container

这里是例子

<mat-select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" style="width :1%">
  <ng-container *ngFor="let app of apps">
        <mat-option *ngIf="app.name != null"  [value]="app.id">
           {{app.name}}
        </mat-option>
  </ng-container>

</mat-select>

和 .ts

apps = [
    { id: 1, name: null },
    { id: 2, name: null },
    { id: 3, name: 'test1'},
    { id: 4, name: 'test2'}

  ]

Answer 2

与ng-container一起使用条件。检查真实值：这意味着，如果您的应用具有以下两个值之一['', undefined, null]，则不会显示该值。

<ng-container *ngFor="let app of apps">
  <mat-option *ngIf="app.name" [value]="app.id">
    {{app.name}}
  </mat-option>
</ng-container>

Answer 3

您需要在收到应用程序时对其进行过滤：

let appsData = data["data"];
this.apps = appsData.filter(app => { 
  if(app.id != null) { 
    return app;
  } 
});

---

这会丢弃组件中的应用程序，因为这似乎是您想要执行的操作。如果不是这种情况，并且想要保留它们，则可以使用另一个数组：

public appsToRender = [];

...

let appsData = data["data"];
this.appsData = appsData;
this.appsToRender = appsData.filter(...)

在您的模板中：

*ngFor="let app of appsToRender"

---

重要：如trichetriche所述，您的过滤器函数应返回true或false，而不是任何值或void。

return app.id != null;