問題タブ [angular-material-stepper]

angularでステッパーを使用していますが、ステップの1つにコンポーネントを表示する必要があります。そのコンポーネントをロードするには、ボタンをクリックする必要があります。子コンポーネントが挿入されているのがわかりますが、正しく表示されません。「Elements」タブでその要素を調べて移動すると、挿入されたコンポーネントが表示され、カーソルを合わせると、ブラウザの一番右隅が強調表示されます。ルーティングモジュールは次のとおりです。

親-stepper.html

親ステッパー.コンポーネント.ts

誰かが私がここで間違っていることを提案できれば？

注: 問題は主にマテリアル ステッパーにあることがわかりました。条件を追加すると、正しく表示されます。しかし、これの問題は、同じコンポーネントを複数回ロードすることです。誰かがよりエレガントなソリューションを提案できる場合。

アイコンの色を設定できません

私は 5 つのマットステップ (たとえば、パート A、パート B ... パート E という名前) を持つマット水平ステッパーを持っています。一部のビジネス ルールによって、各パーツ (マット ステップ) の色が異なる場合があります。

「選択した」マットステップを変更する方法、またはすべてのマットステップの色を (同じ色で) 変更する方法は知っていますが、動的に変更する方法がわからないため、各パーツのアイコンの背景色が異なる場合があります.

Angular v7 の使用

以下は、3 番目のマットステップ アイコンを緑色に設定するスタイルです。Id は機能しますが、実行時にコンポーネント (typescript) から動的に色を変更する方法がわかりません。

また、使ってみ[ngClass]たのですがマットステップ属性として使うと無視されます。ステップラベルを囲んでそこで使用する場合にのみ機能しますが、それは要件ではありません(ラベルではなくアイコンの背景色を変更する必要があります)。

期待される結果: 各ステップの完了レベルに応じて、各ステップごとに異なる列を設定できます。(マットステップは、黄色、赤、緑、および黒の組み合わせである可能性があります)、

実際の結果: コンポーネント変数の設定に基づいてアイコンの色を変更できません

Angular Material の Stepper の実装に取り​​組んでいます。すぐに使えるスタイルを使用したいのですが、ダウンロードできる場所はありますか?

Angular Material のサンプル ページからスタイルをコピーして貼り付けてみましたが、これは非常に面倒なプロセスです。

各ステップで動的フォームを持つステッパーを使用しています。次のように次のボタンと戻るボタンをクリックすると呼び出す、戻るボタンと次のボタンのメソッドを作成しました。

また、ユーザーがヘッダー ナビゲーションをクリックしたときに前後に移動したいので、そのためのメソッドも作成しました。

onNavChange(event) の中で .. ステップ名に応じてメソッド next または sub を呼び出します。

問題は、次のボタンをクリックすると、2回呼び出されることです...最初に onNavChange($event) を呼び出し、次に次のボタンでメソッドが呼び出されます。

一度だけ呼び出されるようにするにはどうすればよいですか? ヘッダーをクリックしたときにのみ onNavChange() が実行される方法はありますか?