在 Angular 数据表中获取记录

我是 Angular 的新手，我的要求是

一个组件包括一个字段名为“品牌”的表单和一个通过 angular 服务将相同记录添加到数据库的按钮，并且应该有一个数据表，它将所有品牌数据从数据库中提取到数据表中。

因此，通过在 ts 文件中使用 fetchall 方法，我将值分配给数据表。我将 fetchall 方法调用到ngoninit()，这有助于我在组件初始化时显示表中的数据。要添加记录，我正在使用方法调用 addyear() 并调用相同的方法到 onSumbit()。我的问题是当我将记录添加到数据库时，我应该能够将新添加的记录加载到角度数据表中！由于ngoninit（）中的该方法，我必须刷新浏览器以获取数据表中的记录，请给我一个解决方案。对于后端，我使用 Spring Boot 和 Postgres 数据库

我的组件 TS 文件

    constructor(private brandService:BrandService,private toastyService: ToastyService) { }

  ngOnInit() {
    this.findbrand();
  }

  onSubmit()
  {
    this.saveBrand();
    this.submitted=true;
  }

  saveBrand()
  {
    this.brandService.addbrand(this.brand).subscribe
    (data=>this.addToast({title:'Record Has been added Successfully', msg:'', timeout: 5000, theme:'default', position:'top-right', type:'success'}),
    error=>this.addToast({title:'Record Not Added! Sorry', msg:'', timeout: 5000, theme:'default', position:'top-right', type:'error'}));
    this.brand=new Brand();
  }

  findbrand()
  {
    this.brandService.findbrand().subscribe(data=>this.data=data,error=>this.addToast({title:'Record Cannot be found! Sorry', msg:'', timeout: 5000, theme:'default', position:'top-right', type:'error'}));
  }

我的 Service.TS 文件

export class BrandService {

  constructor(private http:HttpClient) { }

  private baseUrl='http://localhost:8080/snazzy-engine/brand';

  addbrand(brand:object):Observable<any>
  {
    return this.http.post(`${this.baseUrl}` + `/insert`, brand,{
      headers: {'schemaName':'test.'}
   });
  }

  findbrand():Observable<any>
  {
    return this.http.get(`${this.baseUrl}` + `/find-all`,{
      headers: {'schemaName':'test.'}
   });
  }

  getbrandid(id: number): Observable<Object> {
    return this.http.get(`${this.baseUrl}/find-one/${id}`, {headers: 
   {'schemaName':'test.'}});
  }
}

我的 HTML 文件

<div class="table-content crm-table">
          <div class="project-table">
            <div id="crm-contact" class="dt-responsive">
              <div class="row">
                <div class="col-xs-12 col-sm-12 col-sm-12 col-md-6">
                  <div>

                  </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6">
                  <div style="text-align: right;">
                    <label>Search:
                      <input type="search" [(ngModel)]="filterQuery" class="form-control input-sm full-data-search" placeholder="Search name">
                    </label>
                  </div>
                </div>
              </div>
              <!-- <div class="panel-heading">User information</div>-->
              <div class="table-responsive">
                <table class="table table-bordered table-hover table-sm" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy"
                  [(mfSortOrder)]="sortOrder">
                  <thead class="thead-dark text-center">
                    <tr>
                      <th style="width:10%">
                        <mfDefaultSorter by="brandId">Brand ID</mfDefaultSorter>
                      </th>

                      <th style="width:70%">
                        <mfDefaultSorter by="name">Brand Name</mfDefaultSorter>
                      </th>
                      <th style="width:10%">
                        <mfDefaultSorter by="more">More</mfDefaultSorter>
                      </th>
                      <th style="width:10%">
                        <mfDefaultSorter by="checkbox">Delete</mfDefaultSorter>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let item of mf.data; let i = index;">
                      <td>{{item.brandId}}</td>
                      <td>{{item.brand}}</td>
                      <td class="action-icon">
                          <button type="button" class="btn btn-sm btn-primary" (click)="findybrandid(item.brandId);modalDefault.show();">
                            edit
                            </button>
                      </td>
                      <td>
                        <div class="checkbox text-center">
                          <label><input type="checkbox" value=""></label>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="10">
                        <mfBootstrapPaginator class="pagination-main f-right"></mfBootstrapPaginator>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            </div>
            <div style="text-align:center;">
              <button class="btn btn-out btn-danger ripple light"><i class="icofont icofont-check-circled"></i>Delete</button>
          </div>
        </div>

    </div>
</div>