マテリアル UI とリアクティブ フォームを使用しています。アプリケーションは正常に動作しており、ログインできますが、ターミナル ウィンドウにエラー TS2531: オブジェクトが「null」の可能性があります。参照用に以下のエラー スクリーン ショットと、ログイン HTML テンプレートおよびコンポーネントを添付しました。

私の login.component.html コードは

私の login.component.ts コードは

アプリケーションは正常に実行されていますが、ターミナルで以下のエラーが発生しています

誰か助けてくれませんか

別の (親) コンポーネントで使用する単純なカスタム ドロップダウン コンポーネントがあります。

それはすべてうまくレンダリングされます。しかし、別のオプションを選択してドロップダウンの値を変更すると、コンポーネントにバインドされている値は更新されません。

私のコンポーネントは次のようになります。

そしてhtml：

そして、次のように親コンポーネントで使用します（app.component.html）：

そして app.component.ts で:

保存ボタンを押すと、プロパティが更新されないことが示されます。

デモアプリ

ここにデモがあります：

https://stackblitz.com/edit/angular-c3ew8a?file=src/app/dropdown/dropdown.component.html

再現するには：

• アプリケーションをロードします。
• val 2ドロップダウンから選択
• ボタンSaveを押します。

テキストを表示するアラートが表示されることを期待していますselected userid = 2。しかし、次のように表示されますselected userid = 1。userIdプロパティを更新しませんでした。

この作業を行うには、Angular で何をする必要がありますか?