*ngIf 값이 배열에 존재하는 경우

*ngIf 값이 배열에 존재하는 경우

ngIf 지침에 대해 질문이 있습니다.

애플리케이션에 동적으로 생성되는 각진 재료 토글이 있습니다. 모두 특정 ID를 가집니다.저는 ngIf 지시를 사용하면 제 페이지에 조건부로 해당 요소를 표시할 수 있다는 것을 알고 있습니다.나는 ngIf를 다른 함수에 사용하고 있지만 요소의 id가 배열에 존재하는지 어떻게 확인할 수 있는지에 대해 조금 망설여집니다.

배열은 다음과 같습니다.

["fc-vis", "fc-bis", "fc-dis"]

내 토글에는 모두 fc-vis / fc-bis 등의 ID가 있습니다.

ngIf를 사용해봤는데, 그 상태에서 요소의 id를 보내는 방법을 모르겠어요...아니면 제가 뭔가 잘못하고 있을지도 모릅니다.

제가 하려는 것은 다음과 같습니다.

*ngIf="object.id in myArrayList" 

또는

*ngIf="checkIfExists(object.id)"

그 상태에서 개체의 ID를 사용하여 해당 배열에 존재하는지 확인할 수 있는 방법이 있습니까?

최신 브라우저를 지원하는 경우 다음을 사용할 수 있습니다.Array includes() 여기서의 방법은 다음과 같습니다.

*ngIf="myArrayList.includes(object.id)" 

• 그includes()메소드는 배열이 해당 항목 중 특정 값을 포함하는지 여부를 결정하며, 적절한 경우 true 또는 false를 반환합니다.따라서 이 메소드를 호출한 후 여기서 추가 확인을 수행할 필요가 없습니다.

IE를 지원하기 위해 다음을 사용할 수 있습니다.Array indexOf() 여기서의 방법은 다음과 같습니다.

*ngIf="myArrayList.indexOf(object.id) > -1" 

• 그indexOf()method는 지정된 요소가 배열에서 발견될 수 있는 첫 번째 인덱스를 반환합니다. 또는 요소가 없으면 -1을 반환합니다.따라서 이 메소드를 호출한 후 값이 반환되었는지 여부를 확인하기 위해 추가적인 검사를 수행해야 합니다.indexOf()메서드가 다음보다 큽니다.-1아니면 그렇지 않고 그것에 근거하여.*ngIf요소를 표시하거나 숨깁니다.

Array indexOf() 메서드를 사용할 수도 있습니다. 요소가 배열에 없으면 -1을 반환합니다.
당신의 ts -
const myArray = ["fc-vis", "fc-bis", "fc-dis"]
템플릿 -
*ngIf="myArray.indexOf(object.id) > -1"
templateRef를 사용하여 요소의 ID를 가져옵니다. 예:

<div id="fc-vis" #myId>
  <p *ngIf="myArray.indexOf(myId?.id) > -1">{{myId.id}} working </p> 
</div>

답변은 좋지만 엄격한 템플릿 검사(또는 적어도 그렇게 생각함) 문제에 직면했습니다.

특정 필드(예: 부울 필드)를 선택한 경우 일부 필드가 숨겨져야 하는 일반 고급 검색 대화 상자 구성 요소를 만들고 있으므로 ">=" 비교 선택을 숨기려고 합니다.제가 가지고 있던 것은 이런 종류의 필드를 얻는 기능이었습니다.

getFieldType(criterion) === searchTypes.typeBoolean

그래서 저는 더 많은 데이터 유형을 지원하기 위해 논리를 수정하고 싶었습니다. 그래서 여기에 온 것입니다.- 의 경우 - 문는제 - 저의경 -getFieldType(AbstractControl) 정의되지 않은 응답을 반환할 수 있습니다(includes()또는indexOf()타이핑할 때 나를 위해 일했습니다(또한 시도했습니다)..includes()):

*ngIf="[searchTypes.typeString, searchTypes.typeBoolean].indexOf(getFieldType(cr)) !== -1">

다 안요.includes()그리고.indexOf()매개 변수 유형이 배열의 유형(!)과 동일해야 합니다.

---

저의 경우 전체 양식을 ng-container에 캐스팅하여 해결했습니다. 이렇게 하면 메서드가 정의되지 않은 상태로 반환될 경우 HTML이 렌더링되지 않습니다.

<ng-container *ngIf="getFieldType(cr) as fieldType">

언급URL : https://stackoverflow.com/questions/51140214/ngif-value-exists-in-array