각도 "10 $digest() 반복 도달" 오류 문제 슈팅 방법
$420() 반복 횟수 10에 도달했습니다.중단!
"Watchers burned in the last 5 repeates: " 등의 의미로 많은 지원 텍스트가 있지만, 이 텍스트의 대부분은 다양한 함수의 Javascript 코드입니다.이 문제를 진단하기 위한 경험칙이 있나요?항상 완화할 수 있는 문제입니까?아니면 이 문제를 경고로 취급할 수 있을 정도로 복잡한 애플리케이션이 있습니까?
말한 ) .$digest데이터를 너무 많이 변경하였거나 사이클을 클릭합니다.
앱의 어떤 부분이 이 동작을 일으키는지 알아내는 가장 빠른 해결책은 다음과 같습니다.
- 의심스러운 HTML을 모두 삭제합니다.기본적으로 템플릿에서 모든 HTML을 삭제하고 경고가 없는지 확인합니다.
- 경고가 없는 경우 - 삭제한html의 작은 부분을 추가하여 문제가 재발했는지 확인합니다.
- 경고가 표시될 때까지 순서 2를 반복합니다.HTML의 어느 부분이 문제의 원인인지 알 수 있습니다.
- 자세히 조사 - 은 3단계에 있는 을 합니다.
$scope각 "를 반환하고 .$digestcycle. cycle cycle cycle cycle cycle cycle cycle cycle cycle cycle. - 있다면
$digest1단계 이후의 반복 경고는 매우 의심스러운 작업을 하고 있을 수 있습니다. 템플릿 동일한 합니다.
커스텀 필터의 입력을 변경하지 않는 것도 확인합니다.
JavaScript에는 일반적으로 예상하는 것과 달리 동작하지 않는 특정 유형의 객체가 있다는 점에 유의하십시오.
new Boolean(true) === new Boolean(true) // false
new Date(0) == new Date(0) // false
new String('a') == new String('a') // false
new Number(1) == new Number(1) // false
[] == [] // false
new Array == new Array // false
({})==({}) // false
보통 매번 다른 오브젝트를 반환할 때 발생합니다.
를 들어, 이것을 「 」, 「 」로 사용하는 는,ng-repeat:
$scope.getObj = function () {
return [{a: 1}, {b: 2}];
};
는, Angular가 , 까지(「」와 , 「Angular」의 2회까지) 함수를 됩니다.===이 경우 함수는 항상 새 개체를 반환하기 때문에 true를 반환하지 않습니다.
console.log({} === {}); // false. Those are two different objects!
이 경우 개체를 스코프에 직접 저장하여 수정할 수 있습니다.
$scope.objData = [{a: 1}, {b: 2}];
$scope.getObj = function () {
return $scope.objData;
};
그렇게 하면 항상 같은 물건을 돌려받을 수 있어!
console.log($scope.objData === $scope.objData); // true (a bit obvious...)
(복잡한 어플리케이션에서도 이러한 상황은 발생하지 않습니다).
업데이트: Angular는 웹 사이트에 더 자세한 설명을 추가했습니다.
이 솔루션을 여기에 넣고 싶었어요. 다른 사람에게 도움이 되었으면 좋겠어요.생성된 속성을 호출할 때마다 새 개체를 만드는 작업을 반복하고 있었기 때문에 이 반복 문제가 발생했습니다.
생성된 오브젝트가 처음 요청되었을 때 캐싱하고 캐시가 있으면 항상 캐시를 반환하여 수정했습니다.필요에 따라 캐시된 결과를 파기하는 dirty() 메서드도 추가되었습니다.
난 이런 게 있었어
function MyObj() {
var myObj = this;
Object.defineProperty(myObj, "computedProperty" {
get: function () {
var retObj = {};
return retObj;
}
});
}
구현된 솔루션은 다음과 같습니다.
function MyObj() {
var myObj = this,
_cached;
Object.defineProperty(myObj, "computedProperty" {
get: function () {
if ( !_cached ) {
_cached = {};
}
return _cached;
}
});
myObj.dirty = function () {
_cached = null;
}
}
또한 무한 루프가 아닐 가능성도 있습니다. 10회 반복은 어느 정도의 확실성을 가지고도 충분히 큰 수는 아닙니다.그러므로 무모한 추적을 하기 전에 먼저 그 가능성을 배제하는 것이 현명할 수 있다.
가장 쉬운 방법은 최대 다이제스트루프 카운트를 훨씬 더 큰 수로 늘리는 것입니다.이것은 메서드를 사용하여 수행할 수 있습니다.이 경우,infdig에러는 단순히 충분히 복잡한 업데이트 로직이 있는 것처럼 보이지 않습니다.
「 다이제스트 하지 않는다」( 「 다이제스트하지 않는다를 사용해 솔루션을 할 수 .while,for ★★★★★★★★★★★★★★★★★」Array.forEach때로는 구조가 고도로 중첩되어 재귀적이지 않을 수 있습니다.이 경우 제한을 높이는 것 외에 할 수 있는 일이 별로 없을 수도 있습니다.
이 오류를 디버깅하는 또 다른 방법은 다이제스트 데이터를 확인하는 것입니다.JSON을 예쁘게 인쇄하면 어레이를 얻을 수 있습니다.각 최상위 엔트리는 반복을 나타내며, 각 반복은 워치엔트리 목록으로 구성됩니다.
, "에서 경우, " "는 "로 변경되어 있습니다.$watch그 값이 변화하고 을 알 수 . 즉, 값이 무한히 변화하고 있다는 을 알 수 있습니다.
$scope.vm.value1 = true;
$scope.$watch("vm.value1", function(newValue)
{
$scope.vm.value1 = !newValue;
});
[
[
{
"msg":"vm.value1",
"newVal":true,
"oldVal":false
}
],
[
{
"msg":"vm.value1",
"newVal":false,
"oldVal":true
}
],
[
{
"msg":"vm.value1",
"newVal":true,
"oldVal":false
}
],
[
{
"msg":"vm.value1",
"newVal":false,
"oldVal":true
}
],
[
{
"msg":"vm.value1",
"newVal":true,
"oldVal":false
}
]
]
, 특히 이 수 .★★★★★★★★★★★★★★★★★★,msg 값(예: ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」."fn: regularInterceptedExpression"가 시시 the {{ }}인터폴레이션
그 외에는 HTML을 잘라 문제의 원인을 찾는 등 이미 언급한 방법이 물론 도움이 됩니다.
나도 매번 새로운 날짜를 만드는 데 같은 문제가 있었어.그래서 데이트 상대에게 모든 전화를 다음과 같이 변환했습니다.
var date = new Date(); // typeof returns object
대상:
var date = new Date().getTime(); // typeof returns number
날짜 객체 대신 숫자를 초기화하면 해결되었습니다.
간단한 방법은 min 파일이 아닌 angular.delay를 사용하는 것입니다.열고 선을 찾습니다.
if ((dirty || asyncQueue.length) && !(ttl--)) {
아래에 행을 추가합니다.
console.log("aaaa",watch)
페이지를 새로 고치면 개발 도구 콘솔에 오류 코드가 나타납니다.
에서는 이미 알려진 버그입니다.ui-router도움이 되었습니다.https://github.com/angular-ui/ui-router/issues/600
또, 이 에러 메세지는, 제 프로젝트에서 가지고 있던 커스텀 디렉티브의 templateUrl에 오타가 있었을 때에 받은 것입니다.오타 때문에 템플릿을 로드할 수 없었습니다.
/* @ngInject */
function topNav() {
var directive = {
bindToController: true,
controller: TopNavController,
controllerAs: 'vm',
restrict: 'EA',
scope: {
'navline': '=',
'sign': '='
},
templateUrl: 'app/shared/layout/top-navTHIS-IS-A-TYPO.html'
};
웹 브라우저 개발 도구의 네트워크 탭에서 404 오류가 발생하고 있는 리소스가 있는지 확인합니다.
에러 메세지는 매우 이해하기 어렵고, 실제의 문제와는 관계가 없는 것처럼 보이기 때문에 간과하기 쉽습니다.
.otherise()에서 루트 정의가 누락되어 잘못된 루트에 도달했기 때문에 프로젝트에서 이 문제가 발생하였습니다.
이 일을 하고 있어서 이 문제가 있었습니다.
var variableExpense = this.lodash.find(product.variableExpenseList, (ve) => {
return ve.rawMaterial.id = rawMaterial.id;
});
대신 (= vs === )유닛 테스트가 깨지기 시작했고, 저는 저의 어리석음을 알게 되었습니다.
var variableExpense = this.lodash.find(product.variableExpenseList, (ve) => {
return ve.rawMaterial.id === rawMaterial.id;
});
동적 툴팁이 필요한 문제에 부딪혔습니다.각도가 매번 새 값으로 재계산되도록 합니다(같은 값이라도).다음과 같이 계산된 값을 캐시하는 함수를 만들었습니다.
$ctrl.myObj = {
Title: 'my title',
A: 'first part of dynamic toolip',
B: 'second part of dynamic tooltip',
C: 'some other value',
getTooltip: function () {
// cache the tooltip
var obj = this;
var tooltip = '<strong>A: </strong>' + obj.A + '<br><strong>B: </strong>' + obj.B;
var $tooltip = {
raw: tooltip,
trusted: $sce.trustAsHtml(tooltip)
};
if (!obj.$tooltip) obj.$tooltip = $tooltip;
else if (obj.$tooltip.raw !== tooltip) obj.$tooltip = $tooltip;
return obj.$tooltip;
}
};
그리고 html에서는 다음과 같이 접속했습니다.
<input type="text" ng-model="$ctrl.myObj.C" uib-tooltip-html="$ctrl.myObj.getTooltip().trusted">
이렇게 접근하여 해결책을 찾았습니다.문자를 확인해보니 다음과 같더군요.
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
마지막 5회 반복으로 실행된 워치: [[{"msg":statement === statement & functionCall(),"newVal":[{"id":7287,"references...
그래서 만약 당신이 볼 수 있다면
메시지
오류를 생성하는 통계 정보입니다.이 메시지에서 호출된 함수를 확인했는데, 문제가 있는 함수를 판별하기 위해 모든 기능에서 (false)를 반환했습니다.그 중 하나는 반환을 계속 변경하는 함수를 호출하는 것이 문제였습니다.
이상하게 들릴지 모르지만, 갑자기 브라우저가 뜨면 재기동하는 것만으로 이 에러를 수정했습니다.
따라서 한 가지 해결책은 브라우저의 캐시를 지우거나 브라우저를 재시작하는 것입니다.
언급URL : https://stackoverflow.com/questions/17116114/how-to-troubleshoot-angular-10-digest-iterations-reached-error
'programing' 카테고리의 다른 글
| 업데이트 후 사용자가 FireBase 앱에 로그인하도록 하려면 어떻게 해야 합니까? (0) | 2023.03.18 |
|---|---|
| Wordpress 플러그인 개발에 부트스트랩을 포함하려면 어떻게 해야 합니까? (0) | 2023.03.18 |
| CORS: credentials 플래그가 true인 경우 Access-Control-Allow-Origin에서 와일드카드를 사용할 수 없습니다. (0) | 2023.03.18 |
| Newtonsoft JSON - 동적 객체 (0) | 2023.03.18 |
| 플러그인으로 WordPress 템플릿을 덮어쓸 수 있는 방법이 있습니까? (0) | 2023.03.18 |