使用角度路由显示不同组件中的国家、州和城市

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；您正在寻找的几乎是基本的角度教程。

入口点是您的

country.component.ts

并仅获取数据而不是每个组件上的数据。所以你应该提供服务

DataService

。在那里你应该推送你的 json 数据。你所有的 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);
    }
}

Answer 2

    [HttpGet]
    public async Task<ActionResult<ApiResult<StatesDto>>> GetStates(
        int pageIndex=0,
        int pageSize=10,
        string? sortColumn=null,
        string? sortOrder=null,
        string?filterColumn=null,
        string? filterQuery = null)
    {
        return await ApiResult<StatesDto>.CreateAsync(
            _context.States.AsNoTracking(),
            pageIndex,
            pageSize,
            sortColumn,
            sortOrder,
           filterColumn,
           filterQuery

            );
    }

    // GET: api/States/5
    [HttpGet("{id}")]
    public async Task<ActionResult<StatesDto>> GetStatesDto(int id)
    {
        var statesDto = await _context.States.FindAsync(id);

        if (statesDto == null)
        {
            return NotFound();
        }

        return statesDto;
    }

    // PUT: api/States/5
    // To protect from overposting attacks, see https://go.microsoft.com/fwlink/?linkid=2123754
    [HttpPut("{id}")]
    public async Task<IActionResult> PutStatesDto(int id, StatesDto statesDto)
    {
        if (id != statesDto.Id)
        {
            return BadRequest();
        }

        _context.Entry(statesDto).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!StatesDtoExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

    // POST: api/States
    // To protect from overposting attacks, see https://go.microsoft.com/fwlink/?linkid=2123754
    [HttpPost]
    public async Task<ActionResult<StatesDto>> PostStatesDto(StatesDto statesDto)
    {
        _context.States.Add(statesDto);
        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateException)
        {
            if (StatesDtoExists(statesDto.Id))
            {
                return Conflict();
            }
            else
            {
                throw;
            }
        }

        return CreatedAtAction("GetStatesDto", new { id = statesDto.Id }, statesDto);
    }

    // DELETE: api/States/5
    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteStatesDto(int id)
    {
        var statesDto = await _context.States.FindAsync(id);
        if (statesDto == null)
        {
            return NotFound();
        }

        _context.States.Remove(statesDto);
        await _context.SaveChangesAsync();

        return NoContent();
    }

    private bool StatesDtoExists(int id)
    {
        return _context.States.Any(e => e.Id == id);
    }
}

} 如何使用这个 dotnet 控制器制作角度分量