html - Angular - Zeichenketteninterpolation einer undefinierten Variable

Ich versuche, einige Informationen, die von einer externen API abgerufen werden, auf einer Webseite mithilfe von Angulors String-Interpolation anzuzeigen.

Wenn keine Informationen abgerufen werden oder noch nicht 'eingetroffen' sind, möchte ich 'N/A' anzeigen.

Ich habe den folgenden Ansatz versucht, jedoch erhalte ich einen Fehler, der sagt: 'Kann die Eigenschaft 'name' von undefiniert nicht lesen' in Zeile 2 des folgenden HTML-Codes.

Wie kann ich N/A anzeigen, während ich auf die Definition der Antwort warte?

app.component.html:

<div id="api-info">
    {{ !!this.apiInfo.name ? this.apiInfo.name : 'N/A' }}
</div>

app.component.ts:

import { ApiInfo } from 'src/app/apiInfo.model'
import { ApiService } from 'src/app/api.service'
(...)
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
    apiInfo: ApiInfo;
    apiInfoSub: Subscription;

    constructor(apiService: ApiService) {}

    ngOnInit() {
        // apiService.apiInfo is a Subject<ApiInfo> where the API response is stored
        this.apiInfoSub = this.apiService.apiInfo.subscribe(
            (response) => {
                this.apiInfo = response;
            }
        );
    }

    ngOnDestroy() {
        this.apiInfoSub.unsubscribe();
    }
}

apiInfo.model.ts:

export class ApiInfo {
    public name: string,
    public id: number,

    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }
}

Antwort #1

Es ist besser, den Async-Pipe zu verwenden, anstatt sich manuell auf den Stream zu abonnieren und das Abonnement zu kündigen. Das macht den Code sauberer und im HTML verwendet man den Ausdruck:

 {{(stream$|async)?.name || 'N/A'}}

Hier ist ein Codebeispiel: https://stackblitz.com/edit/angular-nknwuq

Antwort #2

Ich schlage vor, innerhalb der Komponente nicht zu abonnieren. Besser ist es, stattdessen den Async-Pipe zu verwenden und wie folgt zu prüfen...

<div id="api-info" *ngIf="(apiInfo$ | async as apiInfo); else pending">
    {{ apiInfo.name }}
</div>

<ng-template #pending>
  n/a
</ng-template>

Was es Ihnen auch ermöglicht, das n/a recht einfach anders zu gestalten