如何从多个 JSON 文件中选择数据并将它们关联起来？

Question

我在Angular11 有一个项目，其中包含两个JSON 文件，一个与省有关，另一个与市镇有关，两个文件都由Id 相关，（省的Id 连接到每个文件）他们的自治市）。 我创建了一个form 来选择省份，并根据所选省份选择相应的直辖市之一。我可以毫无问题地选择省，但我不能显示市。

这是我的component.html：

<ng-container>
    <div class="formAdd">
        <div fxLayout="row wrap" fxLayoutGap="10px">
            <mat-form-field fxFlex="20">
                <mat-label>Province</mat-label>
                <mat-select>
                    <mat-option *ngFor="let op of provinceArray;">
                        {{ op.nm }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field fxFlex="20">
                <mat-label>Municipality</mat-label>
                <mat-select>
                    <mat-option>
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
</ng-container>

这是我的component.ts：

import municipalityArray from "../municipality.json";
import provinceArray from "../province.json";

export class SidenavAutosizeExample {
  selectedProvince = provinceArray[0];
  provinceArray = provinceArray;

  constructor() {}
}

这是我的province.json：

{
    "id": "24",
    "nm": "León"
},
{
    "id": "34",
    "nm": "Palencia"
}

这是我的municipality.json：

{
    "id": "24007",
    "nm": "Arganza"
}, {
    "id": "24008",
    "nm": "Astorga"
}, {
    "id": "24009",
    "nm": "Balboa"
}, {
    "id": "24010",
    "nm": "Bañeza, La"
}, {
    "id": "34001",
    "nm": "Abarca de Campos"
}, {
    "id": "34003",
    "nm": "Abia de las Torres"
}, {
    "id": "34004",
    "nm": "Aguilar de Campoo"
}, {
    "id": "34005",
    "nm": "Alar del Rey"
}

我的问题： 当我选择一个省份时，我需要与所选省份相关的城市列表显示在城市选择中。

每个省都有一个 ID (Leon - 24)，每个自治市将其所属省的 ID 连接起来 (Arganza - 24007)。

您需要收集所选省份的 ID，在 JSON 中搜索以该 ID 开头的所有城市并在选择中显示它们。有谁知道我该怎么做？

我有以下两个 JSON 文件的示例代码：https://stackblitz.com/edit/material-sidenav-example-4zr4yq?file=municipality.json

Answer 1

您可以在此处查看工作示例。 Stackblitz link

1. 确保有一个干净的 json 文件： 在我的示例中，我将 2 个列表放在一个文件中。

2. 创建一个服务(api.service.ts) 来获取所有带有 observables 的列表 以及解析 json 数据的助手。

    const fromJson = data => JSON.parse(JSON.stringify(data));

1. Init 使用 FormGroup 您的组件表单 在示例中，我使用 FormBuilder 来初始化 formGroup。

2. 通过api服务获取省份数据

3. 使用参数province id

   为城市列表创建更新方法

4. 使用 mat-select 的 selectionChange 来更新和获取城市列表数据， 我在省份的模型中添加一个prId来匹配过滤器。