Question

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

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

所以通过在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>

Answer 1

尝试

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.data.push(this.brand); /*change: push new data into an array*/
    this.brand=new Brand();
}

在Angular数据表中提取记录

1 个答案: