Хочу построить столбчатую диаграмму, используя список словарей в angular 6

#c# #angular6

#c# #angular6

Вопрос:

Я новичок в angular и c #, я пытаюсь построить столбчатую диаграмму из списка Dictionary, этот словарь я получаю из запроса в c # для извлечения значений из базы данных. Мой запрос выглядит следующим образом:

  public async Task<ListResultDto<DashboardCountDto>> CountAllTrainDocuments()
        {
                //var retList = new List<ListOfDocumentTypes>();
              var allTrainFiles = await _trainDocumentRepository.GetAllListAsync();
               var CountTrainFiles = allTrainFiles.GroupBy(t=> t.DocumentTypeName).
                                    Select(e => new DashboardCountDto{ 
                                         //Total = e.Count(),
                                    DocumentTypeName = e.Key,
             ProceesedDocumentCount = e.Count(g => g.Processed = true),
             UnProceesedDocumentCount = e.Count(g => g.Processed = false),
            
         }).ToList();
}
  

Мой DTO выглядит следующим образом:

 public class DashboardCountDto : EntityDto<long>
    {
        //public int Total { get; set; }
        public string DocumentTypeName { get; set; }
        public int ProceesedDocumentCount { get; set; }
         public int UnProceesedDocumentCount { get; set; }

   }
  

Приведенный ниже код используется для соединения C # и angular:

 countAllTrainDocuments(): Observable<ListResultDtoOfDashboardCountDto> {
        let url_ = this.baseUrl   "/api/services/app/VariableLayoutDocument/CountAllTrainDocuments";
        url_ = url_.replace(/[?amp;]$/, "");

        let options_ : any = {
            observe: "response",
            responseType: "blob",
            headers: new HttpHeaders({
                "Accept": "application/json"
            })
        };

        return this.http.request("post", url_, options_).pipe(_observableMergeMap((response_ : any) => {
            return this.processCountAllTrainDocuments(response_);
        })).pipe(_observableCatch((response_: any) => {
            if (response_ instanceof HttpResponseBase) {
                try {
                    return this.processCountAllTrainDocuments(<any>response_);
                } catch (e) {
                    return <Observable<ListResultDtoOfDashboardCountDto>><any>_observableThrow(e);
                }
            } else
                return <Observable<ListResultDtoOfDashboardCountDto>><any>_observableThrow(response_);
        }));
    }

    protected processCountAllTrainDocuments(response: HttpResponseBase): Observable<ListResultDtoOfDashboardCountDto> {
        const status = response.status;
        const responseBlob = 
            response instanceof HttpResponse ? response.body : 
            (<any>response).error instanceof Blob ? (<any>response).error : undefined;

        let _headers: any = {}; if (response.headers) { for (let key of response.headers.keys()) { _headers[key] = response.headers.get(key); }};
        if (status === 200) {
            return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
            let result200: any = null;
            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
            result200 = ListResultDtoOfDashboardCountDto.fromJS(resultData200);
            return _observableOf(result200);
            }));
        } else if (status !== 200 amp;amp; status !== 204) {
            return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
            }));
        }
        return _observableOf<ListResultDtoOfDashboardCountDto>(<any>null);
    }
  

Я пробовал этот код в angular 6

 ngOnInit() {
        this._variableLayoutDocumentService.countAllTrainDocuments.subscribe((result: ListResultDtoOfDashboardCountDto) => {
          if (result) {
            for (let i = 0; i < result.length; i  ) {
              this.barChartData[0].data.push(result[i].ProceesedDocumentCount);
              this.barChartData[1].data.push(result[i].UnProceesedDocumentCount);
              this.barChartLabels.push(result[i].DocumentTypeName);
            }
          }
        });;
      }

Its giving me 2 errors:
1. Property 'subscribe' does not exist on type '() Observable<ListResultDtoOfDashboardCountDto>'.ts(2339)
2.any Property 'length' does not exist on type 'ListResultDtoOfDashboardCountDto'.ts(2339)
  

Пожалуйста, помогите в решении этой проблемы, я хочу, чтобы моя диаграмма выглядела так.
введите описание изображения здесь

Комментарии:

1. Возможно, вы захотите включить определения для типа ListResultDto и EntityDto . 2.any Property 'length' does not exist on type 'ListResultDtoOfDashboardCountDto'.ts(2339) -> Я думаю, что здесь можно ожидать массив, однако вы создали свой собственный тип оболочки, который может не иметь свойства length.

Ответ №1:

В вашем вопросе отсутствует промежуточная информация. C # выполняется на стороне сервера, тогда как Angular выполняется в вашем браузере. Поэтому Angular необходимо сделать запрос к веб-серверу / api, который предоставляет эти данные. Чтобы выполнить этот запрос с помощью Angular, взгляните на HttpClient:

Что вы используете, чтобы предоставить объекты C # http-запросу?