Javascript Angular 2在更新其他数据时更新数据

我有两个

元素，一个用于地区，另一个用于城市。我通过从

ngOnInit（）

函数调用函数

getDistricts（）

来获取地区。到目前为止还不错

我不知道如何告诉angular将新城市提取到cities的select元素。我试图在下面的代码中执行类似操作，但出现了一个错误：

ORIGINAL EXCEPTION: TypeError: Cannot read property 'cities' of undefined

这当然是因为

selectedDistrict

在开始时未定义

---

这是一个区域对象的示例。（包括其中的城市）

district.service.ts：

import {Injectable}         from "@angular/core";
import 'rxjs/add/operator/toPromise';

import {District}               from "./district";
import {HttpClientService}  from "../http-client/http-client.service";

@Injectable()
export class DistrictService {

    private districtsUrl = 'districts/all';

    constructor(private httpClient: HttpClientService) {
        this.httpClient = httpClient;
    }

    getDistricts(): Promise<District[]> {
        return this.httpClient.get(this.districtsUrl)
            .toPromise()
            .then(response => response.json().data)
            .catch(this.handleError);
    }

    getDistrict(district: string): Promise<District> {
        return this.getDistricts()[district];
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

view.search.component.html

<select class="search-select">
    <option *ngFor="let district of districts" (click)="selectDistrict(district)">
        {{ district.name }}
    </option>
</select>

<select class="search-select">
    <option *ngFor="let city of selectedDistrict.cities ">
        {{ city.name }}
    </option>
</select>

{{district.name}}
{{city.name}

尝试初始化您的

选择的district:district

selectedDistrict: district = {};

此外，对于选择选项，我认为这不是一个好主意
（单击）=“selectDistrict（district）”
，因为理论上你可以使用键盘/箭头选择项目

因此，您应该使用
onchange
事件

<select (change)="alert(this.options[this.selectedIndex].text);">

尝试初始化您的
选择的district:district

selectedDistrict: district = {};

此外，对于选择选项，我认为这不是一个好主意
（单击）=“selectDistrict（district）”
，因为理论上你可以使用键盘/箭头选择项目

因此，您应该使用
onchange
事件

<select (change)="alert(this.options[this.selectedIndex].text);">

尝试初始化地区：地区[]；排列
你可以这样做：

districts = [];

问题是您试图访问未初始化对象的city属性。您需要确保对象已初始化

例如，使用新的

this.selectedDistrict = new District();

或

在本代码中也是如此

<select class="search-select">
    <option *ngFor="let district of districts" (click)="selectDistrict(district)">
        {{ district.name }}
    </option>
</select>


{{district.name}}

确保正确调用selectDistrict
尝试初始化district:district[]；排列
你可以这样做：

districts = [];

问题是您试图访问未初始化对象的city属性。您需要确保对象已初始化

例如，使用新的

this.selectedDistrict = new District();

或

在本代码中也是如此

<select class="search-select">
    <option *ngFor="let district of districts" (click)="selectDistrict(district)">
        {{ district.name }}
    </option>
</select>


{{district.name}}

确保正确调用selectDistrict，而不是初始化我的
selectedDistrict
，我只需将*ngIf=“selectedDistrict”添加到我的
select
元素中。
我只需添加*ngIf=“selectedDistrict”，而不是初始化我的
selectedDistrict
对于我的
选择
元素。
很少有人知道Angular2在模板中支持elvis运算符（即？），这对于异步数据流非常有用。为此，您必须将模板更新为

<select class="search-select">
    <option *ngFor="let city of selectedDistrict?.cities ">
        {{ city.name }}
    </option>
</select>


{{city.name}
很少有人知道Angular2在模板中支持elvis运算符（即？），这对于异步数据流非常有用。为此，您必须将模板更新为

<select class="search-select">
    <option *ngFor="let city of selectedDistrict?.cities ">
        {{ city.name }}
    </option>
</select>


{{city.name}
好吧，现在我一开始没有收到任何错误，但我认为当我执行
（单击）=“selectDistrict（district）”
时出现了问题，因为我在html中添加了以下代码：
{{selectedArea | json}
，即使我单击了一个地区，它仍然是空的。我不知道为什么，但我没有收到任何警报。我遗漏了什么？是的，但是你的答案是有问题的，因为你不能创建一个空对象，它不是我所在地区的一个实例。好吧，现在我一开始没有收到任何错误，但我认为当我做
（单击）=“selectDistrict（District）”
时有问题，因为我在我的html中添加了以下代码：
{{selectedArea | json}
即使我点击了一个地区，它仍然是空的。我不知道为什么，但我没有收到任何警报。我遗漏了什么？是的，但是你的答案是有问题的，因为你不能创建一个空对象，它不是我所在地区的一个实例。它到底做什么？如果我没有错，你想避免
无法读取未定义的属性“cities”错误，特别是当数据在一段时间后异步到达时。因此，如果
selectedDistrict
对象未定义/为空，则elvis运算符不会读取
cities
，从而防止发生错误。这不是在解决你的问题吗？我想了另一个解决方案，我确实解决了我的问题。你的解决方案看起来更干净。我会查的是的。请注意，
ngIf
将首先删除DOM，然后再添加回来，这是不必要的。如果您的DOM是巨大而复杂的，那么这一点都不理想。谢谢！你的解决方案是史诗般的，比我的更酷！：p它到底做什么？如果我没有错，您希望避免
无法读取未定义的属性“cities”的错误，尤其是当数据在一段时间后异步到达时。因此，如果
selectedDistrict
对象未定义/为空，则elvis运算符不会读取
cities
，从而防止发生错误。这不是在解决你的问题吗？我想了另一个解决方案，我确实解决了我的问题。你的解决方案看起来更干净。我会查的是的。请注意，
ngIf
将首先删除DOM，然后再添加回来，这是不必要的。如果您的DOM是巨大而复杂的，那么这一点都不理想。谢谢！你的解决方案是史诗般的，比我的更酷！：这是一个有问题的方法。我找到了解决办法。我只需要做*ngIf=“selectedDistrict”。这是一个有问题的方法。我找到了解决办法。我只需要做*ngIf=“selectedDistrict”。