угловые подкомпоненты обновляют список в родительском компоненте

Question

У меня есть родительский компонент, который запрашивает службу, чтобы получить список автобусных компаний:

     getBusCompanies(){
      this.busCompanyService.getAll().subscribe(
      data => {this.busCompanies = data}
        );  
      }

Когда вы добавляете новую автобусную компанию, я использую подкомпонент, который имеет форму для создания новойавтобусная компания.Новая автобусная компания создана, но родительский список не обновлен.Он только обновляется, я нажимаю кнопку сохранения в дочернем компоненте два раза, но затем создаются две автобусные компании, поэтому я всегда один позади, если вы меня поняли.

Я пытался:

• @ Вывод и после нажатия кнопки «Сохранить» в дочернем элементе он вызывает метод в родительском элементе для повторного получения данных автобусной компании из службы.

• the ngOnChangemethod.

Как можно обновить список компаний бис в родительском компоненте после сохранения новой автобусной компании в дочернем компоненте?

вот почтовый индекс:

<mat-card>
 <form #busCompanyForm="ngForm" (ngSubmit)="save(busCompanyForm.value)">
  <mat-card-header>
   <mat-card-title><h2>{{busCompany.id ? 'Edit' : 'Add'}} BusCompany</h2> 
   </mat-card-title>
  </mat-card-header>
 <mat-card-content>
   <input type="hidden" [(ngModel)]="busCompany.id" name="id" #id> 
    <mat-form-field>
      <input matInput placeholder="Bus Company Name" 
       [(ngModel)]="busCompany.name"
           required name="name" #name>
  </mat-form-field>
  <mat-form-field>
      <input matInput placeholder="Bus Company email" 
    [(ngModel)]="busCompany.email"
             required name="email" #email>
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="Bus Company Address" 
         [(ngModel)]="busCompany.address"
               required name="address" #address>
      </mat-form-field>
      <mat-form-field>
          <input matInput placeholder="Bus Company phone" 
          [(ngModel)]="busCompany.phone"
                 required name="phone" #phone>
        </mat-form-field>
</mat-card-content>
<h1>testing id {{busCompany.id}}</h1>
<mat-card-actions>
  <button mat-raised-button color="primary" type="submit"
          [disabled]="!busCompanyForm.form.valid" 
          (click)="saved();">Save</button>
  <button mat-raised-button color="secondary" 
    (click)="remove(busCompany.id)"
          *ngIf="busCompany.id" type="button">Delete</button>
   <a mat-button routerLink="/bus-company-list">Cancel</a>
   <a mat-button [routerLink]="['/route-edit',{busCompanyId: 
    busCompany.href}]">Create a Route</a>
   </mat-card-actions>
   <mat-card-footer>
  <div class="giphy">
    <img   
  src="https://d1rw89lz12ur5s.cloudfront.net
 /photo/pinkgorillagames/file/b228d784b1ad244
 c2afc90dfb37ee277/large/Zelda%20Phantom%20H
 ourglass%20Link%20Small%20Plush.jpg" alt="test image">
       </div>
     </mat-card-footer>
   </form>
</mat-card>

когда пользователь нажимает сохранить в дочернем компоненте, происходит вызов метода родительского компонента для запроса службы автобусной компании.

У меня есть прогулка, но я не думаю, что это правильный способ сделать эту работу:

    // method called from the child component after save is pressed
    // this will wait for 1 sec the get the bus companies 
   // needed to do this because the list was not updating 
 myMethod() {
       timer(1000).subscribe(t =>
       this.getBusCompanies()
        );

       timer(1000).subscribe(t =>
       this.showEdit = false
        );  
        }

вышеперечисленные работы, и вы можете увидеть список автобусных компаний, заполненный новой автобусной компаниейчерез одну секунду.

Я не понимаю, почему мне нужно подождать, прежде чем позвонить в автобусную службу.

Если вы подписываетесь на услугу, обновляется ли список при внесении изменений?

Answer 1

он ожидает, пока API завершит процесс в бэкэнде, прежде чем он заполняется, но вы можете заполнить список во внешнем интерфейсе с помощью push, что делает его мгновенным, но я бы положился на бэкэнд, потому что вы могли бы захотеть сделатьубедитесь, что новая автобусная компания была сохранена в БД, прежде чем вы подтвердите ее пользователю во внешнем интерфейсе.

Вы можете обновить новый список, как только вы получите ответ OK, подобный этому:

createBusCompany(){
        //You can also pass data in the function
        this._busCompanyService.post(this.busCompany)
        .subscribe(busDataResult => {
            //Update list
            this.busCompanies.push(this.busCompany);
            this.clear();
        }, error => {
            //Do not update list if there is an error
        });
    }