Angular-オプションの入力プロパティのデフォルト値を設定する方法

3
Allwe 2019-05-06 13:04.

Angularコンポーネントのオプションのプロパティのデフォルト値を設定するための「Angular / Typescriptの方法」とは何ですか?オプションのプロパティに渡された値があるとき、私はトラブルを抱えていますnullundefined

現在、私は次のようなものを持っています:

export class FooComponent implements OnInit {
  @Input() foo = 'foo';
  @Input() bar = 0;
  @Input() baz?: string;
}

デフォルト値を宣言する場合、それは割り当てられた値のタイプであり、プロパティはデフォルトでオプションであるため、タイプを指定する必要はありません。これは、の場合ですbarと、fooプロパティ。

または?、このプロパティがオプションであることをマークするために使用できますが、デフォルト値を宣言することはできません。これはbaz財産の場合です。

次に、これらのプロパティに異なる値を渡すとどうなるかを見てみましょう。

<app-foo-component
  [foo]
  [bar]="null"
  [baz]="undefined"
>
</app-foo-component>

これらのプロパティをコンソールログに記録すると、次のようになります。

foo 正しくなります 'foo'

bar になります null

baz になります undefined

渡された値がnull /未定義の場合にもデフォルト値を設定するエレガントな方法はありますか、それともこのようにOnInitでチェックする必要がありますか?

OnInit() {
  this.bar = this.bar || 0;
}

これを行うには何らかの方法があるように感じます。私にとって、オプションのプロパティは、値が欠落しているか、nullまたは未設定である可能性があることを意味しますが、デフォルト値を設定する場合は、プロパティが欠落しているか空の場合にのみ機能します。これらの場合でも、値はnullまたは未定義として設定されており、混乱を招くようです。

2 answers

3
Parth Devloper 2020-02-13 14:29.

ここで、PROPER 最善の 解決策これについては。(角度7、8、9)

アドレス指定ソリューション@Input変数のデフォルト値を設定します。その入力変数に値が渡されない場合は、デフォルト値が使用されます。

例:

carという名前のオブジェクトインターフェイスがあります。

export interface car {
  isCar?: boolean;
  wheels?: number;
  engine?: string;
  engineType?: string;
}

角度の@inputデコレータを使用してcarのプロパティを渡す必要があるapp-carという名前のコンポーネントを作成しました。ただし、isCarプロパティとWheelsプロパティにはデフォルト値が必要です(つまり、isCar:true、wheels:4)

以下のコードに従って、そのオブジェクトにデフォルトを設定できます。

export class CarComponent implements OnInit {
  private _defaultCar: car = {
    // default isCar is true
    isCar: true,
    // default wheels  will be 4
    wheels: 4
  };

  @Input() newCar: car = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newCar )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newCar = { ...this._defaultCar, ...this.newCar };
   //  console.log(this.newCar);
  }
}

より詳細な記事については、これを参照してください。

ここから破壊割り当てを参照してください

0
ConnorsFan 2019-05-06 20:15.

barゲッター/セッタープロパティとして定義し、必要に応じてデフォルト値がセッターに適用されていることを確認できます。

private _bar = 0;

@Input() get bar() {
  return this._bar;
}
set bar(value) {
  this._bar = value || 0;
}

デモについては、このstackblitzを参照してください。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

その時ゼルダの予告編はおそらく成長した男性を泣かせた

その時ゼルダの予告編はおそらく成長した男性を泣かせた

まったく新しいゼルダの伝説ゲームが期待されているゲームの公開はほとんどありませんが、2004年のE3でトワイライトプリンセスが生み出した激しい反応には何の影響もありません。ゲーム会社が記者会見を従業員でいっぱいにするのはよくあることです。

レポート:テリーコリンズはメッツマネージャーとして行われる

レポート:テリーコリンズはメッツマネージャーとして行われる

写真:アル・ベロ/ゲッティ・ケン・ローゼンタールは、今日のフィリーズとの試合が終了すると、テリー・コリンズがメッツのマネージャーを辞任すると報告しています。これは、大きな救済として上陸したとしても、大きなショックではありません。コリンズの契約は今シーズン後に失効する予定だったので、メッツは彼の将来について何らかの形で決定することを決定しました、そしてロッカールームが準備ができた有毒な場所になったという報告が出た後、彼らが彼を連れ戻すことは想像できませんでした彼らのマネージャーから移動します。

その時私はウェンディのツイッターアカウントを実行している間にウイルスに行きました

その時私はウェンディのツイッターアカウントを実行している間にウイルスに行きました

この画像は法的な理由で削除されました。16分は、一時的に口コミで広まった一般の人々にチェックインするシリーズです。

ポルシェ911フラットシックスが高解像度で解剖されるのを見る

ポルシェ911フラットシックスが高解像度で解剖されるのを見る

写真:911 Magazine / Vimeoポルシェ911フラットシックスは象徴的なエンジンです。このリアマウントエンジンは、おそらくこれまでで最も話題になり、賞賛されたスポーツカーの心臓部です。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language