我如何 select 来自多个 JSON 文件的数据并将它们关联起来？

Question

我在 Angular11 中有一个项目，其中包含两个 JSON 文件，一个与省份有关，另一个与市政府有关，两个文件都通过 Id 关联，（各省与它们的每个直辖市相连）。我创建了一个 form 到 select 的省份，并根据所选省份创建了 select 相应的自治市之一。我可以 select 没有问题的省份，但我不能显示直辖市。

这是我的 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"
}

我的问题: 当我 select 一个省时，我需要与 selected 省相关的城市列表显示在 select 个城市中。

每个省份都有一个 ID (Leon - 24)，每个市将其所属省份的 ID 串联起来 (Arganza - 24007)。

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

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

Answer 1

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

确保有一个干净的 json 文件：在我的示例中，我将 2 个列表放在一个文件中。
创建服务 (api.service.ts) 以获取所有具有可观察值的列表和一个解析 json 数据的助手。

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

Init 你的组件表单有一个 FormGroup 在示例中我使用 FormBuilder 来初始化 formGroup.
获取具有 api 服务的省份的数据
使用参数 province id
为城市列表创建更新方法
使用mat-select的selectionChange来更新和获取城市列表数据，我在省份的模型中添加了一个prId来匹配过滤器

我如何 select 来自多个 JSON 文件的数据并将它们关联起来？

How can I select data from multiple JSON files and relate them?

json

angular

forms

angular11