材料下拉菜單，選擇與搜索產生100％的CPU

我有以下的HTML代碼材料下拉菜單，選擇與搜索產生100％的CPU

<material-dropdown-select [buttonText]="organizer?.name" 
    [options]="filteredSailingClubs" 
    [itemRenderer]="displayNameRenderer"> 
    <div header> 
     <material-select-searchbox 
      label="Search..." 
      [filterable]="filteredSailingClubs"> 
     </material-select-searchbox> 
    </div> 
</material-dropdown-select>

及以下實施

var _list = [new SailingClub('123', 'Example1'), new SailingClub('456', 'Example2')]; 

final ItemRenderer<SailingClub> displayNameRenderer = (SailingClub item) => item.name; 

StringSelectionOptions<SailingClub> get filteredSailingClubs => new StringSelectionOptions(_list, toFilterableString: displayNameRenderer);

不幸的是，momemnt我打開一個頁面，在這個內容瀏覽器的標籤似乎產生100％的CPU負載，我不知道如何調試。

來源

2017-09-07 Fabian

當然，發佈後，我立即發現錯誤。我正在重新生成get方法中的StringSelectionOptions。但現在我想知道。我的帆船俱樂部名單從外面改變（firebase），但我的例子只適用於一個靜態列表，所以我會如何處理這個？ – Fabian

您可以使'filteredSailingClubs'成爲一個字段，然後在更新'_list'時更新該字段。 –

感謝這個想法，我仍然沒有看到這是如何工作的。我將filteredSailingClubs更改爲在構造函數中初始化的字段。但是，這當然是更早，然後我的數據加載。我也可以通過firebase添加更多的SailingClubs，這隻會更新商店中的列表，但不會更新我的字段。直到現在，我用ngFor迭代了這個列表，並且會自動處理更新。我現在怎麼做？如果清單發生變化，我的店不會打電話給我，它不應該。 – Fabian

好吧，原因很簡單。我正在重建列表中的每個訪問權的OptionList：

StringSelectionOptions<SailingClub> get filteredSailingClubs => new StringSelectionOptions(_list, toFilterableString: displayNameRenderer);

它應該只構造一次，例如，在類的構造函數中。

來源

2017-09-09 07:39:55 Fabian

材料下拉菜單，選擇與搜索產生100％的CPU

回答

相關問題