Infragistics｜Ignite UI for Angular｜如何將多個數據綁定到 IgxGrid 中的一個單元格

尚無瀏覽量

2023-08-06 更新

通過將模板應用到 IgxGrid 的顯示單元格，您可以將多個數據綁定到一個單元格。

要將模板應用到可見單元格，請使用IgxCell 指令。在 ng-template 中，您可以通過 ngTemplateOutletContext 獲取對IgxGridCell 的引用，因此將其存儲在變量 cell(let-cell) 中。從變量 cell 中，使用 cell.row.rowData 訪問行數據。

<igx-grid #grid1 [data]=“localData” [primaryKey]=“‘id'” [autoGenerate]=“false” width=“500px” height=“350px”>

  <igx-column field=“id” header=“id”></igx-column>

  <igx-column field=“name” header=“名前”></igx-column>

  <igx-column field=“prefecture” header=“場所”>

    <ng-template igxCell let-cell=“cell”>

      <div>

        <div>{{cell.row.rowData.prefecture}}</div>

        <div>{{cell.row.rowData.city}}</div>

      </div>

    </ng-template>

  </igx-column>

</igx-grid>

執行結果

💬 想找尋適合的軟體服務嗎？

Infragistics｜Indigo Design｜在 Sketch 檔案中建立 Grid 元件並產生程式碼的基本設置

Infragistics｜Ultimate UI for WPF｜安裝 WPF 產品 – 我想恢復到先前的服務版本

Infragistics｜Ignite UI for Angular｜IgxGrid 如何取得選定行數據

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴，歡迎諮詢你需要的軟體服務！

軟體專家

群昱作為全球知名軟體推薦合作夥伴，致力於提供更多軟體解決方案給你！

更多軟體新知

Infragistics｜Ignite UI for Angular｜如何將多個數據綁定到 IgxGrid 中的一個單元格

💬 想找尋適合的軟體服務嗎？

軟體專家

立即詢價