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

Question

我想将 SQL 方法的结果转换为数组，以便我可以在 Angular 7.

中使用数组上的过滤器选项

我仍然在 Angular (7) 中弄湿我的脚，我正在尝试设置一个嵌套的 dropdown/select 列表，其中第一个 select 列表用于 "Departments" 和 selected 值将 return 我的 "DeptTypes" dropdown/select 列表的结果集。

我目前正在 return 通过发送 selected 值 (id) 调用我在 ...component.ts 中的 "changeData(id: number)" 事件来处理数据。它成功地 returns 数据，但有时会出现下拉列表不总是填充的问题。由于总是调用 SQL 后端，这似乎是一个性能或速度问题。所以，我想 return 将数据作为数组，以便我可以使用 .filter 命令，但似乎没有选项。那么，解决我的小问题的最佳方法是什么？我正在考虑将 returned 列表推入一个 [] 数组变量，这样我就可以使用 "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 return 的结果，它并不总是填充 "typeId"。这是一个 "hit or miss." 有时数据在那里，有时只是空白。

我想使用 returning 所有部门区域类型并使用数组和 "filter" 命令。例如：

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

在 component.ts 本身或更正确的方法中处理此问题，因为 "filter" 在此调用中不起作用。

Answer 1

看来我要回答我自己的问题了。我实际上可以过滤返回的可观察对象……问题是我定义了一个使用接口的变量，反映了我的模型。如果我删除它并使其成为 "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 返回的列表复制到数组中

Angular 7 - Copying a List returned from SQL into an Array

asp.net-core-2.1

angular7