我有一個如下用例：我的目標是更新陣列if和else大小寫。
主陣列（cis）如下所示
.html
<sample-container [cis]="filterCi(currentBaseline.cis, currentBaseline)"> </sample-container>
.ts 此函式在上面提供的陣列上運行一個映射，并通過每次對子項進行遞回呼叫，回傳與所有物件相同的結構，除了具有屬性的物件checked:false（從結構中洗掉）。
//retrieveChildren
retreiveChildren(children: Structure[]) : Structure[] {
let filteredCis = children && children.filter((ci) =>{
if(ci.children && ci.children.length > 0){
retreiveChildren(ci.children);
}
return ci.checked === true;
}) ;
return filteredCis;
}
//filterCi function
filterCi(cis: Structure[], baseline: Baseline): Structure[] {
if(baseline.isHideElementsActivated){
let newArray = [...cis]
let result = newArray.filter(ci => ci.checked === true).map((item,index) => {
return {
...item,
children : retreiveChildren(item.children)
}
})
console.log("Result array...." , result)
return result;
}else{
return cis;
}
}
我在這里面臨的問題是，該filterCi函式正在無限呼叫。最初，我認為這是因為遞回呼叫，但即使在洗掉遞回之后，它也會導致無限回圈。
最后，我可以得出結論，這是因為mapfilterCi 內部使用了函式。為什么會出現這種行為，我該如何解決？
uj5u.com熱心網友回復：
當您從模板中的輸入系結呼叫方法時，它將評估每個更改檢測周期，因為 Angular 無法知道這是一個純函式（請參閱：https ://medium.com/showpad-engineering /why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496）。
我認為這可能是您看到的問題。要解決，您可以使用角管：https ://angular.io/guide/pipes
編輯：您應該能夠將管道的變換方法視為創建管道的 filterCi 方法，如：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterCis'
})
export class FilterCisPipe implements PipeTransform {
public transform(cis: Structure[], baseline: Baseline): Structure[] {
if(baseline.isHideElementsActivated){
let newArray = [...cis]
let result = newArray.filter(ci => ci.checked === true).map((item,index) => {
return {
...item,
children : retreiveChildren(item.children)
}
})
console.log("Result array...." , result)
return result;
}else{
return cis;
}
}
private retreiveChildren(children: Structure[]) : Structure[] {
let filteredCis = children && children.filter((ci) =>{
if(ci.children && ci.children.length > 0){
retreiveChildren(ci.children);
}
return ci.checked === true;
}) ;
return filteredCis;
}
}
然后在 app 模塊中注冊管道之后。在模板中使用它，例如：
<sample-container [cis]="currentBaseline.cis | filterCi:currentBaseline"> </sample-container>
uj5u.com熱心網友回復：
我嘗試了您的解決方案，retreiveChildren并且使用您在問題開頭提供的資料對我有用。
我同意@Jonathan 的說法，即您不應該直接從 HTML 呼叫過濾器函式。你應該使用他提到的管道。
但是我在您的實作中發現了一個錯誤。您的函式會相應地過濾父節點，但對子節點沒有任何影響。您應該將遞回的回傳值分配給孩子以洗掉所有未檢查的孩子。
這可能如下所示：
retrieveChildren(children: Structure[]): Structure[]{
const filteredCis = children && children.filter((ci) => {
if (!ci.checked) {
return false;
}
ci.children = retrievedChildren(ci.children);
return true;
});
return filteredCis;
}
在我看來，我對你的函式進行了重構，使其更具可讀性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/452289.html
上一篇：如何創建一個接受兩個數字的表單，然后將它們作為引數傳遞給php計算器類？
下一篇：未捕獲的ReferenceError：myFunction未在HTMLInputElement.onkeyup中定義