Angular 5 concat string only if field exists in html

Question

我正在尝试连接两个字段，但问题是在某些情况下第二个字段不存在。在下面的代码中，group.GroupDescription 字段在某些整体中不存在。只有当第二个字段 group.GroupDescription 存在时，有没有办法连接两个字段。

注意 - 我也尝试过安全导航运算符，但如果值不存在，它会显示 null。

在此致谢

         <select
            [(ngModel)]="selectedGroup"
            class="form-control"
            (ngModelChange)="onChange($event)"
          >
            <option [ngValue]="undefined" selected>Select</option>

            <option *ngFor="let group of groups" [ngValue]="group">{{
              group.GroupName.S + ' - ' + group.GroupDescription?.S
            }}</option>
          </select>

Answer 1

<ng-container *ngIf="group.GroupDescription">
  {{group.GroupName.S + ' - ' + group.GroupDescription.S}}
</ng-container>
<ng-container *ngIf="!group.GroupDescription">
  {{group.GroupName.S}}
</ng-container>

Answer 2

一个快速简单的解决方案可能是：

<select [(ngModel)]="selectedGroup" class="form-control" (ngModelChange)="onChange($event)">
    <option [ngValue]="undefined" selected>Select</option>

    <option *ngFor="let group of groups" [ngValue]="group">
        {{
            group.GroupName.S + (group.GroupDescription ? " - " + group.GroupDescription.S : '')
        }}
    </option>
</select>

但我建议您在代码的其他地方预先构建字符串。

Angular 5 concat string only if field exists in html

Angular 5 conact string only if field exists in html

javascript

typescript

angular

angular5