Как сделать второй HTTP-вызов для получения данных для детальной сетки - getDetailRowData ()

У меня есть настройка сетки master / detail ag-Grid. Поэтому, когда основная строка сетки расширяется, она загружает детальную сетку.

См. простой пример: https://www.ag-grid.com/javascript-grid-master-detail/#example-simple-master-detail

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

Я хочу взять id выбранной строки главной сетки и сделать второй вызов службы HTTP, чтобы получить данные json для сетки деталей.

Простой пример просто отправляет данные json в successCallback следующим образом:

      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
      }

Я попытался изменить этот метод на:

      getDetailRowData: function(params) {
        this.http
          .get(
            "https://gist.githubusercontent.com/adrianwright109/37a5e37ba2382b26f42b9d12a8593878/raw/60d2ffed511262a6a2e7e54e01bffd28c3701c5e/ClientProfiles.json"
          )
          .subscribe(data => {
            params.successCallback(data);
          });

        // params.successCallback(params.data.callRecords);
      }

С помощью этого кода я получаю следующие ошибки:

ERROR TypeError: невозможно прочитать свойство http, равное undefined

ОШИБКА Ошибка: ag-Grid: не удается заставить сетку рисовать строки, когда она находится в середине строк рисования. Ваш код, вероятно, вызвал метод API сетки, когда сетка находилась на этапе рендеринга. Чтобы преодолеть это, поместите вызов API в тайм-аут, например, вместо api.refreshView () вызовите setTimeout (function () {api.refreshView (), 0}). Чтобы узнать, какая часть вашего кода вызвала обновление, проверьте эту трассировку стека.

      getDetailRowData: function(params) {
        setTimeout(function() {
          this.http
            .get(
              "https://gist.githubusercontent.com/adrianwright109/37a5e37ba2382b26f42b9d12a8593878/raw/60d2ffed511262a6a2e7e54e01bffd28c3701c5e/ClientProfiles.json"
            )
            .subscribe(data => {
              params.successCallback(data);
            });
        }, 500);

        // params.successCallback(params.data.callRecords);
      }

С этим кодом я получаю следующую ошибку:

ERROR TypeError: невозможно прочитать свойство get of undefined

У меня есть Plunker:

https://next.plnkr.co/plunk/IS5a3jKyDJJSSdh0

Кто-нибудь добился ленивой загрузки данных сетки деталей из вызова службы веб-API?


ag-grid ag-grid-angular
person Adrian Wright    schedule 10.04.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам необходимо использовать стрелочную функцию как показано ниже

  getDetailRowData: (params) => {
    this.http
      .get('.....')
      .subscribe(data => {
        params.successCallback(data);
      });

Взгляните на обновленный план: https://next.plnkr.co/edit/t84UtB4kALFfAxO1

Если вы используете setTimeout, это должно быть похоже на

  getDetailRowData: (params) => {
    setTimeout(() => {
      this.http
        .get('...')
        .subscribe(data => {
          params.successCallback(data);
        });
    }, 500);

    // params.successCallback(params.data.callRecords);
  }

Подобное сообщение: Бесконечная прокрутка на стороне сервера ag-grid для доступа к реквизитам

person Paritosh    schedule 10.04.2019

arrow_upward
0
arrow_downward

Что ж, в моем случае я как бы понял, что this или экземпляр здесь не определен внутри detailCellRendererParams, который объявлен внутри моей функции ngOninit (). Поэтому я объявил локальную переменную внутри ngOninit с именем (скажем) temp и инициировал ее с помощью this в начале функции ngOninit (), как показано ниже:

ngOninit() {
    let temp_this: any = this;

    //declaration of detailCellRenderer and stuff...

    getDetailRowData: function(params) {
        temp_this.http.get('..').subscribe(data=>{  // don't forget that this will 
                                               // work only if you have the HTTP dependency injection
                                              // in your constructor else call a service using DI and subscribe it
            params.successCallback(data);
        } 
    }
}

Рекомендуется вызывать методы службы, состоящие из HTTP-запросов, путем добавления инъекции зависимостей службы в ваш компонент, в отличие от приведенного выше кода. В любом случае, надеюсь, это поможет вам понять, почему мы получаем эту ошибку.

person Hari Prasanna Addanki    schedule 06.06.2021