这是ts文件和HTML代码（带有离子的角度7）。当一个选项依赖于前一个选项时，它就起作用了。但是，当我想从一个城市更改为另一个城市时，其他选项应该为null ...但是对于此代码，建筑物没有更改并试图将其清空，但HTML却没有使用它，但对于校园而言，它就可以了。
TS文件
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastController, Events, MenuController } from '@ionic/angular';
import { AuthService } from '../providers/auth.service';
import { HttpHeaders } from '@angular/common/http';
import { Http } from '@angular/http';
import { dashboardFlag } from '../global';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.page.html',
styleUrls: ['./dashboard.page.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardPage implements OnInit {
dashboard: FormGroup;
submitted = false;
headers = new HttpHeaders;
location: any;
slectedLocation: any;
campusData: any;
buildID: any;
id = [];
buildingID=[];
selectedCampus: any;
building=[];
campID: any;
buildingValue: any;
getBuilding: any;
campusValue: any;
formSubmitted = false;
buildingVal: any;
constructor(private route: Router,private changeDetectorRef: ChangeDetectorRef, private http: Http, private formBuilder: FormBuilder, public toastController: ToastController, private api: AuthService, public events: Events,public events1: Events, private menu: MenuController) {
this.events.subscribe('locationData', (data) => {
this.location = data[0].data;
console.log("hei");
console.log(this.location);
})
this.events.publish('dash','hello in info');
this.menu.enable(true);
this.dashboard = formBuilder.group({
city: ['', Validators.required],
campus: ['', Validators.required],
building: ['', Validators.required]
});
this.headers = this.headers.set('Authorization', 'basic' + localStorage.getItem('authKey'));
}
ngOnInit() {
}
onSubmit() {
console.log(this.dashboard);
this.formSubmitted = true;
if (this.dashboard.valid) {
if(this.dashboard.value.city){
if(this.dashboard.value.campus){
if(this.dashboard.value.building){
console.log(this.dashboard.value);
this.route.navigate(['info']);
}else{
this.dashboardToast();
}
}else{
this.dashboardToast();
}
}
else{
this.dashboardToast();
}
// Process your form
}else{
this.dashboardToast();
}
}
dashboardToast() {
console.log("inside");
if (this.dashboard.value.city == "") {
if (this.dashboard.value.campus == "") {
if (this.dashboard.value.building == "") {
this.toastGenerate('Select City,Campus,Building');
}
else {
this.toastGenerate('Select City,Campus');
}
}
else {
if (this.dashboard.value.building == "") {
this.toastGenerate('Select City,Building');
}
else {
this.toastGenerate('Select City');
}
}
}
else {
if (this.dashboard.value.campus == "") {
if (this.dashboard.value.building == "") {
this.toastGenerate('Select Campus,Building');
}
else {
this.toastGenerate('Select Campus');
}
}
else {
if (this.dashboard.value.building == "") {
this.toastGenerate('Select building');
}
}
}
}
async toastGenerate(toastMessage: string) {
const toast = await this.toastController.create({
message: toastMessage,
duration: 2000
});
toast.present();
return;
}
selectedCity(event) {
this.id=[];
this.building=[];
this.slectedLocation = event.target.value;
if (this.location) {
for (let i = 0; i < this.location.length; i++) {
if (this.slectedLocation.Location === this.location[i].Location) {
this.campusData = this.location[i].data;
this.buildingID = [];
for (let j = 0; j < this.campusData.length; j++) {
this.campID = this.campusData[j]["Campus ID"];
this.id.push(this.campID);
// this.selectedBuilding("");
}
}
}
}
}
selectedBuilding(event) {
this.building=[];
this.selectedCampus = event.target.value
if (this.location) {
for (let j = 0; j < this.location.length; j++) {
this.getBuilding = this.location[j].data;
for (let k = 0; k < this.getBuilding.length; k++) {
if (this.selectedCampus === this.getBuilding[k]["Campus ID"]) {
this.building.push( this.getBuilding[k]["Building Id"]);
// this.buildingID.push(this.building);
console.log(this.building);
}
}
}
}
}
}
HTML代码
<ion-content class="bg-image" padding>
<form class="content" [formGroup]="dashboard">
<!-- <ion-card class="card"> -->
<ion-item>
<ion-label>City</ion-label>
<ion-select placeholder="Select" formControlName="city" cancelText="Nah" okText="Okay!" (ionChange)="selectedCity($event)">
<ion-select-option [value]="cityValue" *ngFor="let cityValue of location">{{ cityValue.Location }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label>Campus</ion-label>
<ion-select placeholder="Select" formControlName="campus" cancelText="Nah" okText="Okay!" (ionChange)="selectedBuilding($event)">
<ion-select-option [value]="campusValue" *ngFor="let campusValue of id"> {{campusValue}} </ion-select-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label>Building</ion-label>
<ion-select placeholder="Select" formControlName="building" cancelText="Nah" okText="Okay!">
<ion-select-option [value]="buildingValue" *ngFor="let buildingValue of building">{{buildingValue}}</ion-select-option>
</ion-select>
</ion-item>
</form>
<!-- <ion-toolbar>
</ion-card>
<ion-button value="block" color="success">Submit</ion-button> -->
<ion-button class="submitButton" shape="round" expand="block" padding (click)="onSubmit()">Submit</ion-button>
</ion-content>
当我选择城市时，应根据城市选择其他两个选项。有用！ 但是，当更改城市时，只有校园发生变化，而建筑物只有在选择校园后才会发生变化。如何使其工作。当我从一个城市切换到另一个城市时，我希望其他两个选项为空