Angular 7 - Копирование списка, возвращенного из SQL, в массив

Question

Я хотел бы преобразовать результаты метода SQL в массив, чтобы я мог использовать опцию фильтра для массива в Angular 7.

Я все еще промокаю в Angular (7) иЯ пытаюсь настроить вложенный раскрывающийся список / список выбора, где первый список выбора предназначен для «Отделов», а выбранное значение вернет набор результатов для моего раскрывающегося списка / списка выбора «DeptTypes».

Яв настоящее время возвращаю данные, отправляя выбранное значение (id), вызову моего события "changeData (id: number)" в ... component.ts.Он успешно возвращает данные, но иногда возникает проблема с не всегда заполненным раскрывающимся списком.Похоже, что это проблема производительности или скорости из-за того, что мы всегда обращаемся к 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>

my ... 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».Это "удар или мисс".Иногда данные есть, а иногда просто пустые.

Я хотел бы вернуться к возвращению всех типов областей отдела и использовать массив и команду «фильтр».например:

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

в самом файле component.ts или более подходящем способе решения этой проблемы, поскольку «фильтр» не работает с этим вызовом.

Answer 1

Похоже, я могу ответить на свой вопрос. Я действительно могу отфильтровать возвращаемое наблюдаемое ... проблема заключалась в том, что я определял переменную, которая использовала интерфейс, отражающий мою модель. Если я удаляю это и делаю его "любым", я могу затем поместить его в массив:

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

Итак, я просто вызываю свой typeList () в моем "ngInit ()", и об этом позаботились.