Angular动态添加筛选行：组件切换异常与下拉选值获取问题

我正在开发Angular项目的搜索/筛选功能，核心需求是实现动态添加筛选行，具体要求如下：

• 上百个筛选字段统一放在下拉菜单中（示例包含Manager、City、Name选项）
• 用户选择不同字段时，右侧自动展示对应组件：选City显示城市下拉框，选Name显示文本框
• 支持添加多行筛选条件

此前我已实现动态增删行，以及根据inputType判断显示文本框或下拉框，但存在两个问题：

1. 切换左侧字段时，所有行的右侧组件会同步变更
2. 新增筛选行时会自动显示之前选中的组件，实际期望是右侧组件仅在左侧选中对应字段后才展示

经@Nick Felker协助修改后，上述两个问题已解决，但现在遇到新的问题：无法获取下拉字段的选中值，无法生成所需的JSON格式键值对，特此求助。

内容的提问来源于stack exchange，提问作者SK.