Выполнить одну команду после завершения другой команды в Angular 9

#angular #typescript

#angular #typescript

Вопрос:

Я считываю информацию о своих провинциях из Api, а затем хочу получить информацию о городах из Api, но когда я хочу подать заявку на город, состояние свойства по-прежнему пустое, и эта операция не выполняется, как я могу решить свою проблему?

         export class StateComponent implements OnInit {
          constructor(public dialog: MatDialog, private _service: AssessmentServiceService) { }
         ngOnInit(): void {
        this.flagProgressBar = true;
        this._service.getDataStates().subscribe(
          (res: IState[]) => {
           this.state = res;
            
          }
        )
        for (const index in this.state) {
          this._service.getDataCitys(this.state[index].stateId).subscribe(
            (res: ICity[]) => {
              for (const indexC in res) {
                this.city.push(res[indexC]);
              }
            }
          )
        }
      }
      flagProgressBar: boolean = false;
      state: IState[] = [];
      city: ICity[] = [];
   }
  

Вопрос 2. Какой метод начинает работать после завершения ngOnInit? Я хочу изменить flagProgressBar после завершения всех операций.

Ответ №1:

добавьте вторую подписку в первую подписку. поэтому он не будет запускаться до тех пор, пока не вернется первый

 this._service.getDataStates().subscribe(
      (res: IState[]) => {
       this.state = res;
       for (const index in this.state) {
           this._service.getDataCitys(this.state[index].stateId).subscribe(...)
       }    
    }
  

для вашего второго вопроса вы можете либо поместить флаг во вторую подписку. или вы можете использовать другой метод, который выполняется после OnInit , (например, ngAfterViewInit())

Комментарии:

1. Возможно ли это сделать с помощью async await? Вместо этого поместите две команды друг в друга.

2. Команда ngAfterViewInit не считывается после получения информации о городе, я хочу, чтобы она выполнялась после чтения городов.

3. я никогда не использовал async await в angular. что касается городов, вы понятия не имеете, когда это завершится, поэтому лучший выбор — поместить его во вторую подписку

4. При использовании ngAfterViewChecked я получаю следующее предупреждение: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. at throwErrorIfNoChangesMode (core.js:8092)

5. Я хочу установить для proprty flagProgressBar значение false, когда все операции внутри ngOnInit будут выполнены. Как мне это сделать?