Question

我想将结果从SQL方法转换为数组，以便可以在Angular 7中对数组使用filter选项。

在Angular（7）中，我仍然不知所措，我试图建立一个嵌套的下拉列表/选择列表，其中第一个选择列表用于“部门”，并且所选值将返回我的结果集“ DeptTypes”下拉列表/选择列表。

我当前正在通过发送选定的值（id）返回数据，该事件在... component.ts中调用我的“ changeData（id：number）”事件。它可以成功返回数据，但有时下拉列表有时不会出现问题。由于始终向SQL后端进行调用，因此似乎是性能或速度问题。因此，我想将数据作为数组返回，以便可以使用.filter命令，但是似乎没有选择。那么，什么是解决我的小问题的最佳解决方案？我正在考虑将返回的列表推入[]数组变量中，该变量然后将允许我使用“ push”，但是我无法弄清楚这样做的编码。如果有更好的方法，一定要启发我。谢谢。

  // the calls in my component.ts

opportunityList() { // this is the for the first <select ...>
this.dashboardService.getOpportunities()
  .subscribe((opportunities: Opportunities) => {
    this.opportunities = opportunities;
  },
  error => {
    // this.notificationService.printErrorMessage(error);
  });
  }

  typeList(id: number) { // nested <select ...> that needs to populate
this.dashboardService.getTypesByOpportunityId(id)
  .subscribe((types: Types) => {
    this.types = types;
  },
  error => {
    // this.notificationService.printErrorMessage(error);
  });
}

changedata($event) { // called after selecting a value in the 1st <select ...>

// to remove previous selected items from second dropdown
//this.finaldata.splice(0);

// filter items and pass into finaldata
//this.finaldata = this.type2.filter(x => x.areaId == $event.target.value);
this.typeList($event.target.value);

this.finaldata = this.types;
}

// the HTML
  <label for="areaId">Departments</label>
  <select id="areaId" (change)="changedata($event)" [(ngModel)]="opportunityList" class="form-control">
    <option *ngFor="let opp of opportunities" [value]="opp.areaId">{{ opp.areaName }}</option>
  </select><br />
  <label for="typeId">Department Area Types</label>
  <select id="typeId" class="form-control">
    <option *ngFor="let typeobj of finaldata" [value]="typeobj.typeId">{{ typeobj.typeName}}</option>
  </select>

我的... service.ts

  getTypesByDepartmentId(id: number): Observable<Types> {
const headers = new Headers();
headers.append('content-Type', 'application/json');
const authToken = localStorage.getItem('auth_token');
headers.append('Authorization', `Bearer ${authToken}`);

return this.http.get(this.baseUrl + '/dashboard/GetTypesByDepartmentId/' + id, { headers })
  .map(response => response.json())
  .catch(this.handleError);

}

控制器动作

#region api/dashboard/GetTypesByDepartmentId
[HttpGet("{id}")]
public async Task <IActionResult> GetTypesByDepartmentId([FromRoute]int id)
{
  // retrieve all revenue types

  var model = await (from t in _appDbContext.Type where t.AreaId == id 
               select new
               {
                 t.TypeId,
                 t.TypeName
               }).ToArrayAsync();
  return Ok(model);

}
#endregion

上面的代码通过service.ts返回结果，但并不总是填充“ typeId”。这是“命中或错过”。有时数据在那里，有时只是空白。

我想返回所有部门区域类型，并使用数组和“ filter”命令。例如：

this.finaldata = this.typeList.filter(x => x.areaId == event.target.value);

在component.ts本身中或更简单的方法来解决此问题，因为“过滤器”不适用于此调用。

Answer 1

好像我可以回答自己的问题。我实际上可以过滤返回的observable ...问题是我正在定义一个使用接口的变量，以反映我的模型。如果删除它并将其设置为“ any”，则可以将其推入数组：

  types: any;
  type2: Types[] = [];

  public finaldata: any[] = [];

  typeList() {
   this.dashboardService.getTypes()
  .subscribe((types: Types) => {
    this.types = types;
    this.type2.push({ areaId: this.types.areaId, typeId: this.types.typeId, typeName: this.types.typeName, areaName: this.types.areaName });
  },
  error => {
    // this.notificationService.printErrorMessage(error);
  });
 }

  changedata($event) {
// to remove previous selected items from second dropdown
this.finaldata.splice(0);


// filter items and pass into finaldata
this.finaldata = this.types.filter(x => x.areaId == $event.target.value);
}

因此，我只需在“ ngInit（）”中调用typeList（）即可。

Angular 7-将从SQL返回的列表复制到数组中

1 个答案: