Question

我有州和城市的国家/地区的json。我想在国家（地区）组件上显示第一个国家列表，在州（国家）组件上显示州列表，然后在城市（城市）组件上显示带有路由的城市列表。

请帮助我如何以角度6/7显示父级到子级（多级）的数据。

JSON数据-

{
"country": [{
    "id": 1,
    "countryName": "India",
    "state": [{
        "id": 11,
        "stateName": "Andhra Pradesh",
        "city": [
            "Anantapur",
            "Chittoor",
            "East Godavari",
            "Guntur",
            "Krishna",
            "Kurnool",
            "Nellore",
            "Prakasam",
            "Srikakulam",
            "Visakhapatnam",
            "Vizianagaram",
            "West Godavari",
            "YSR Kadapa"
        ]
    }]
}]

}

国家/地区组件- 在此处显示国家/地区列表，在单击列表后显示其后的特定州/城市。

<ul>
   <li *ngFor="let x of country">{{x.countryName}}</li>
</ul>

Answer 1

TLDR；您正在寻找的几乎是基本的angular tutorial。

入口点是您的country.component.ts，并且仅从一个组件而不是每个组件上获取数据。因此，您应该提供服务DataService。在那里，您应该推送您的json-data。您所有的json条目都有ID，所以我只给路由中的id。

<ul>
   <li *ngFor="let country of countries" [routerLink]="['states',country.id]">{{country.name}}</li>
</ul>

此后，您的states.component.ts应该看起来像一样，但是您要选择的州和城市不是国家和州。

<ul>
   <li *ngFor="let state of states" [routerLink]="['cities',state.id]">{{state.name}}</li>
</ul>

在states.component内，您可以构建服务并在国家/地区数组中搜索合适的对象以获得所需的州。

export class StateComponent implements OnInit {

    country : any; //again or model Country
    id: number;
    private sub: any;

  constructor(
    private route : ActivatedRoute,
    private dataService : DataService,
  ) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number
    });

      this.dataService._data
      .subscribe(
        next => {
          this.country = _data.find(id); //search logic here inside array countries for your country with id, use the normal js find
        },
        () => {
          console.log('Error');
        },
        () => {
          console.log('Complete');
        }
      );
  }
  }

路由模块中的路径应如下所示：

  {
    path: 'states/:id',
    component : StatesComponent,
  },
       {
    path: 'cities/:id',
    component : CitiesComponent,
  }

您可以将所有这些路径设置为children。适合您的关键字：具有可观察性的服务。

DataService如：

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

    private dataSource = new BehaviorSubject(undefined);
    _data = this.dataSource.asObservable();

    constructor(){}

    setDataSource(jsonData : any) {
        this.dataSource.next(jsonData);
    }
}

使用成角度的路线显示不同组件中的国家，州和城市

1 个答案: