Angular에서 "track by"란 무엇입니까?JS는 어떻게 작동합니까?

Angular에서 "track by"란 무엇입니까?JS는 어떻게 작동합니까?

어떻게 그 일을 할 수 있는지 잘 모르겠어요.track by작품과 그것이 하는 일.
저의 주된 목표는 같이 사용하는 것입니다.ng-repeat정확도를 좀 더 높이기 위해서요.

사용.track by문자열과 중복된 값을 추적합니다

보통.ng-repeat항목 자체별로 각 항목을 추적합니다.주어진 배열에 대해objs = [ 'one', 'one', 2, 'five', 'string', 'foo'],ng-repeat각각의 변화를 추적하려는 시도obj에서ng-repeat="obj in objs". 문제는 우리가 중복된 값을 가지고 있고 각이 오차를 낸다는 것입니다.이를 해결하기 위한 한 가지 방법은 다른 방법으로 물체를 각지게 추적하는 것입니다.문자열의 경우,track by $index문자열을 추적할 다른 수단이 없기 때문에 좋은 해결책입니다.

track by& 다이제스트 & 입력 포커스 트리거

당신은 당신이 각진 것에 다소 익숙하지 않다는 것을 암시합니다.다이제스트 사이클은 각도가 해당하는 뷰에 변경 사항을 반영하기 위해 각 감시 속성을 철저하게 검사할 때 발생합니다. 다이제스트 사이클 동안 코드가 다른 감시 속성을 수정하여 각도가 더 이상 변경 사항을 감지하지 않을 때까지 프로시저를 다시 수행해야 하는 경우가 종종 발생합니다.

예를 들어,버튼을 클릭하면 다음을 통해 모델을 업데이트할 수 있습니다.ng-click, 그런 다음(즉, 사용자가 클릭할 때 수행하기 위해 콜백에 기록한 내용) 보기를 새로 고치기 위해 각도 트리거 다이제스트 사이클을 수행합니다.저는 그것을 설명하는 데 너무 명확하지 않으므로, 그것이 명확하지 않았다면 당신은 더 조사해야 합니다.

그래서 다시.track by. 예를 들어 보겠습니다.

1. 서비스를 호출하여 일련의 물건을 반환합니다.
2. 배열 내의 개체를 업데이트하고 개체를 저장합니다.
3. 저장 서비스 후 API가 반환하는 내용에 따라 다음을 수행할 수 있습니다.
   1. 개체 전체를 바꿉니다. OR
   2. 기존 개체의 값을 업데이트합니다.
4. 변화를 반영합니다ng-repeatUI

이 개체를 추적하는 방법에 따라 UI가 변경 사항을 반영하는 방법이 결정됩니다.

내가 경험한 가장 짜증나는 UX 중 하나는 이것입니다.각 셀에는 개체의 속성을 인라인으로 편집할 입력 정보가 있습니다.그러면 값을 변경하고 싶습니다.on-blur, 응답을 기다리는 동안 편집할 다음 셀로 이동하는 동안 해당 개체를 저장합니다.이것은 자동 저장 타입입니다.설정 방법에 따라track by문장 응답이 개체 배열에 다시 기록되면 현재 포커스(예: 현재 편집 중인 필드)가 손실될 수 있습니다.

추가할때track by기본적으로 주어진 집합에서 데이터 개체당 하나의 DOM 요소를 생성하기 위해 각도를 지정합니다.

넌 할 수 있다.track by $index데이터 원본에 중복된 식별자가 있는 경우.

중복 항목을 반복해야 하는 경우 식별 추적을 사용하여 기본 추적 동작을 자신의 것으로 대체할 수 있습니다.

예:

[{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

중복된 값을 사용해 보십시오.ng-repeat, 다음과 같은 오류가 발생합니다.

오류: ngRepeat: Repeater에서 중복 키를 중복합니다.

이러한 문제를 방지하려면 사용해야 합니다.track by $index. 예를 들어,

<ul>
   <li ng-repeat="item in [1, 2, 3, 3] track by $index">
       {{ item }}
   </li>
</ul>

여기에 당신이 얻는 방법이 있습니다.$index중첩된ng-repeat:

<div ng-repeat="row in matrix">
    <div ng-repeat="column in row">
      <span>outer: {{$parent.$index}} inner: {{$index}}</span>
    </div>
</div>

---

다음은 귀사에 도움이 될 수 있는 몇 가지 리소스입니다.

• track by $index문서화
• ngRepeat문서화
• 2014 codelord.net 에 관한 기사ng-repeat퍼포먼스와track by

당신은 사용해야 합니다.track by당신이 기본적인 행동에 반대할 필요가 있는 경우에만ng-repeat중복되는 항목을 제거하는 것입니다.
스코프 속성을 사용하여 아이템을 추적할 수 있습니다.$index또는 사용자 지정 함수를 지정합니다.

예를 들어 다음과 같습니다.

<div ng-repeat="x in [42, 42, 43, 43] track by $index">
  {{x}}
</div>

배열의 모든 값을 표시합니다(42는 두 번 표시됨).

참고 : https://docs.angularjs.org/api/ng/directive/ngRepeat

예를 들어, 우리는 다음과 같은 목록을 가지고 있습니다.

<ul>
   <li ng-repeat="item in items">
       {{ item }}
   </li>
</ul>

여기서 항목은 다음과 같은 구조를 갖습니다.

{ 'id'=>id, 'name'=>name, 'description'=>description }

우리가 업데이트를 원할 때까지 이 목록에는 아무런 문제가 없습니다.우리는 우리 자신의 편의를 위해 다음과 같은 다른 업데이트된 품목 목록으로 품목 목록을 대체합니다.

items = newItems;

그러나 이 새 목록에서 변경되는 항목은 거의 없습니다.대부분의 항목은 동일하게 유지됩니다.안타깝게도 Angular는 우리의 상품을 식별하고 그것들을 각각의 상품에 매핑하는 방법을 알지 못합니다.<li>elements(요소)를 삭제하고 다시 생성합니다.이는 경우에 따라 성능 비용이 매우 많이 소요되며, 여기에track by사용중입니다.

를 추가하여track by요소에 대한 절

<li ng-repeat="item in items track by item.id">

우리는 Angular에게 우리의 상품의 고유한 식별자가item.id. 이제 Angular는 모든 항목을 재생성하지 않고 새로운 ID를 가진 항목만 재생성할 수 있으며 나머지 항목만 업데이트합니다.성능 향상은 대부분의 경우 중요합니다.또한 개인적으로는 업데이트할 때마다 항목이 사라지지 않기 때문에 브라우저의 개발자 도구에서 항목을 더 쉽게 모니터링할 수 있다는 점이 좋습니다.

언급URL : https://stackoverflow.com/questions/39640160/what-is-track-by-in-angularjs-and-how-does-it-work