Question

我有一个父组件，可以查询服务以获取公交公司列表：

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

当您添加新的公交公司时，我使用一个子窗体，该子窗体具有创建新的公交公司的表格。创建了新的巴士公司，但父列表未更新。只是更新了一次，我在子组件中按了两次保存按钮，但随后创建了两个公交公司，所以如果您理解我的话，我总是落后于一个。

我尝试过：

@Output，然后在子项中按Save后，它将在父母从服务中再次获取公交公司数据。
ngOnChange方法。

在子组件中保存新的公交公司后，父组件中的bis公司列表如何更新？

这是邮政编码：

<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
        });
    }

角形子组件会更新父组件中的列表

1 个答案: