*ngIf를 사용하여 angular 2 템플릿에서 빈 객체를 확인하는 방법

*ngIf를 사용하여 angular 2 템플릿에서 빈 객체를 확인하는 방법

내 개체가 비어 있는지 확인하고 싶습니다. 요소를 렌더링하지 마십시오. 다음은 내 코드입니다.

<div class="comeBack_up" *ngIf="previous_info != {}">
  <a [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]">
    {{ previous_info.title }}
  </a>
</div>

하지만 제 코드가 틀렸습니다. 어떻게 하는 게 가장 좋을까요?

이렇게 하면 원하는 작업을 수행할 수 있습니다.

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

또는 더 짧은

<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">

각각{}새 인스턴스를 생성합니다.====서로 다른 개체 인스턴스의 비교는 항상 결과적으로 발생합니다.false문자열로 변환될 때===의 결과.true

플런커 예제

위의 답변에서, 다음은 효과가 없거나 선호도가 낮았습니다.

• (previous_info | json) != '{}'에 대해서만 작동함{}빈 상자, 용이 아님null또는undefined사례.
• Object.getOwnPropertyNames(previous_info).length또한 작동하지 않았습니다.Object템플릿에서 액세스할 수 없습니다.
• 전용 변수를 만들고 싶지 않습니다.this.objectLength = Object.keys(this.previous_info).length !=0;

• 전용 기능을 만들고 싶지 않습니다.

  isEmptyObject(obj) {
     return (obj && (Object.keys(obj).length === 0));
  }
  

---

솔루션: ?와 함께 키 값 파이프를 함께 사용합니다.(안전한 내비게이션 조작자); 그리고 그것은 간단해 보입니다.

의 경우 잘 작동합니다.previous_info = null또는previous_info = undefined또는previous_info = {}거짓 값으로 취급합니다.

<div  *ngIf="(previous_info | keyvalue)?.length">

keyvalue - 객체 또는 맵을 키 값 쌍의 배열로 변환합니다.

- Angular safe navigation operator(?)는 null 및 정의되지 않은 null로부터 보호할 수 있는 유창하고 편리한 방법입니다.

데모: 이전 버전에서도 작동하지만 각 9가 있는 데모

다음과 같은 기능도 사용할 수 있습니다.

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

와 함께isEmptyObject구성 요소에 정의된 방법:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}

위의 답변은 괜찮습니다.그러나 보기에서 다음을 사용할 수 있는 매우 좋은 옵션을 찾았습니다.

{{previous_info}?title}}

아마도 중복된 질문 Angular2 - {object} 여부를 확인하지 않으면 오류가 발생합니다.필드}이(가) 존재합니다.

이것은 저에게 효과가 있었습니다.

확인:length재산과 용도?피해서undefined오류

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

<div class="comeBack_up" *ngIf="previous_info?.length">

갱신하다

길이 속성은 배열에만 있습니다.그 질문은 물체에 관한 것이었기 때문에, 사용.Object.getOwnPropertyNames(obj)개체에서 속성 배열을 가져옵니다.예는 다음과 같습니다.

<div class="comeBack_up" *ngIf="previous_info  && Object.getOwnPropertyNames(previous_info).length > 0">

그previous_info &&개체가 존재하는지 확인하기 위해 추가되었습니다.로 평가된다면,true다음 문은 개체가 적어도 비율을 가지고 있는지 확인합니다.속성에 값이 있는지 확인하지 않습니다.

조금 더 긴 방법(관심이 있는 경우):

타이프스크립트 코드에서 다음을 수행합니다.

this.objectLength = Object.keys(this.previous_info).length != 0;

템플릿에서:

ngIf="objectLength != 0"

ngx-if-empty-또는 has-items 라이브러리는 가독성을 위해 객체, 세트, 맵 또는 배열이 비어 있지 않은지 확인합니다.아마도 누군가에게 도움이 될 것입니다.ngIf와 동일한 기능을 가지고 있습니다(다른 구문 및 'as' 구문이 지원됨).

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

포함 문을 사용하면 개체가 null이거나 빈 집합이 아닌지 확인할 수 있습니다.

<div class="comeBack_up" *ngIf="!['null','{}'].includes(previous_info | json)">

언급URL : https://stackoverflow.com/questions/37111005/how-to-check-empty-object-in-angular-2-template-using-ngif