angularのviewで変数がundefinedの場合の制御方法

Question

質問事項

angularを使用し変数がundefinedだった場合の制御の仕方をご教授ください。

例えば、angularのチュートリアルで、詳細セクションを表示する時の質問です。
https://angular.jp/tutorial/toh-pt2

前提・実現したいこと

下記において、selectedHeroがundefinedの時、表示されませんが、
undefinedの時にも何かを表示させたい時、どういう記載方法がありますでしょうか？

<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </label>
  </div>

</div>

angularに始めたばかりで、ご教授いただけると幸いです。
よろしくお願いします。

試したこと

・上記に下記を付け加える。
(当たり前かもしれないが全く表示されなくなる)

<div ngIf="hiro">
  あああ
</div>

・tsにて下記関数を定義で処理の制御を試みる

  undefineConfirm():void{
    if(this.selectedHero === 'undefined'){
      
    }
  }

下記エラーが出る。
This condition will always return 'false' since the types 'Hero' and 'string' have no overlap.

Answer 1

下記だと文字列扱いになるので、Heroオブジェクトと文字列を比較することはできないというエラーになります。

this.selectedHero === 'undefined'

シングルクォーテーション、またはダブルクォーテーションで囲む必要はありません。

this.selectedHero === undefined

ただ、オブジェクトはnullまたはundefinedでないという条件で下記のような判定をしている場合は
if(this.selectedHero)
*ngIf="selectedHero"

!マークを付ければ逆の意味になりnullまたはundefinedの場合の条件になります
if(!this.selectedHero)
*ngIf="!selectedHero"

Comments

[kenji267]

ありがとうございます。
型に対応したundefinedの比較に疎かったです。
undefinedの場合の処理をhtmlで表示することができました！

後気になるのが、if(this.selectedHero)、if(!this.selectedHero)ですが、
htmlに記載できないですよね、説明上記載したと捉えています。

[storm3]

>htmlに記載できないですよね、説明上記載したと捉えています。
そうです。Typescript側での書き方です。