Как я заполнил vaadin-grid с помощью fetch? - PullRequest
Новая
       46

Как я заполнил vaadin-grid с помощью fetch?

0 голосов
/ 20 сентября 2019

Я использую lit-element и vaadin-grid для создания таблицы.это очень похоже на этот пример.https://stackblitz.com/edit/grid-renderers?file=grid-demo.js

Однако мне постоянно говорят, что у меня синтаксическая ошибка enter image description here

Не могу понять, почему.Я вижу, что запрос приходит и отправляет результат обратно.

Вот код из моего элемента.

  static get properties() {
    return {
        rolls: {
            type: Array
          }
    };
}



 firstUpdated() {
        fetch('http://localhost:2241/api/micrographics/claims/01P78168', {
           mode: 'no-cors'          
          }).then(r=>console.log(r)).then(r => r.json())
          .then(data => {
            this.rolls = data.result;
          });

    }  


render() {
        return html`


      <p>Search Edit Table</p>


      <vaadin-grid multiSort id="valo-grid" .items="${this.rolls}" >

        <vaadin-grid-sort-column resizable width="2em" path="ID" header="ID">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="2em" path="Roll" header="Roll No">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="3em" path="Frame" header="Frame No">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editTextRender}" 
         path="PolicyOcc_No" header="Policy/OccNo" width="11em">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editDateRender}"
        path="ScanDate" header="Scan Date" width="10em" >
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="2em" path="CompanyBranch" header="Company">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editDateRender}"
         path="PurgeDate" header="Purge Date" width="10em">
        </vaadin-grid-sort-column >

        <vaadin-grid-column width="6em" .renderer="${this._boundEditButtonRender}"></vaadin-grid-column>
      </vaadin-grid>

        `;

    }

Вот пример моего ответа 

{"ResultList":[{"Id":"883","PolicyOcc_No":"01P168","CompanyBranch":"0","PurgeDate":"11/31/2019","ScanDate":"","Roll":"1057","Frame":"8","PolicyNo":" ","FileName":"cl.csv"},{"Id":"667","PolicyOcc_No":"01P78168/06","CompanyBranch":"01","PurgeDate":"12/31/2006","ScanDate":"05/19/2006","Roll":"452","Frame":"5","PolicyNo":"01P168","FileName":"cl.csv"}]}

Если я достану mode: 'no-cors', я получу эти ошибки.enter image description here

1 Ответ

0 голосов
/ 21 сентября 2019

Документация для `no-cors гласит, что

Кроме того, JavaScript может не иметь доступа ни к каким свойствам полученного в результате ответа.

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

Возможно этот ответ полезен.

...