在本文中，我們將瞭解如何從Firestore讀取數據並將該數據綁定到Angular Grid的Ignite UI。Firestore是Firebase NoSQL數據庫產品，因此，在開始之前，我建議您瞭解有關Angular的Firestore和Ignite UI的更多信息。
在本文中，我們將學習從Firestore讀取數據並將該數據綁定到Angular Grid的Ignite UI。在關於此主題的下一篇文章中，我們將介紹創建，刪除和更新操作。
因此，讓我們首先設置Firestore，創建一個Angular項目以使用Ignite的Angular UI，然後從Firestore中獲取數據。
設置Firestore
您將導航到Firebase控制檯。當你在那裡時，點擊“添加項目”選項。
單擊“添加項目”後，您將看到一個對話窗口，以提供項目信息。輸入以創建項目，如下圖所示。在這裡，我給了項目名稱iggridemo。
創建項目後，您需要向項目添加應用程序。我們將添加一個Web項目，因為我們將在Angular中使用Firestore數據收集，這是一個Web項目。
當您單擊Web選項時，您將獲得要添加到項目中的代碼段。複製此代碼段，因為稍後您可能需要將其添加到Angular項目中。
注意：我們將在Angular項目的environment.prod.ts文件中添加以下設置 。
接下來，單擊側面菜單選項中的“數據庫”並創建一個集合。請記住，Firestore是基於NoSQL的數據庫。在這裡，我們創建了用於處理數據的集合。要創建數據庫，請轉到側面菜單並單擊“數據庫”，然後創建數據庫。系統會要求您選擇安全規則。選擇選項“ 在測試模式下啟動 ”，然後單擊“啟用”。
設置安全規則後，單擊“添加集合”以將集合添加到數據庫。
為集合命名。在這個例子中，我在這裡給出了“ 產品 ” 的名稱。
創建集合後，添加文檔。我在產品系列中添加了一個文檔，如下圖所示：
添加第一個文檔後，數據庫應如下所示：
現在，讓我們在集合中添加更多文檔。對於該操作，請單擊products集合中的“添加文檔”。
所以，我在產品系列中添加了五個文檔。我們現在將使用Ignite UI for Angular Grid中的產品集合。到目前為止，我們只在Firebase Firestore中創建了該集合。
使用Ignite UI設置角度項目
我們有三個選項可以使用Ignite UI for Angular設置anAngular項目。
- 使用Ignite UI CLI創建一個使用Ignite UI for Angular配置的新Angular項目。
- 在現有Angular項目中使用Ignite UI for Angular。
- 對Visual Studio代碼使用Angite UI for Angular Toolbox Extension。
從現在開始，我將假設您已經將Angular項目配置為與Angular的Ignite UI一起使用。
閱讀更多 愛碼農 的文章
