Angular2의 ngIf 변수 유형 확인 방법

Angular2의 ngIf 변수 유형 확인 방법

Angular2를 배우고 있습니다.개체인 변수가 있는 구성 요소가 있습니다.객체의 필드를 반복하고 있으며, 해당 위치의 데이터 유형에 따라 다른 구성요소를 렌더링해야 합니다.이 경우, 저는 그것을 렌더링하고 싶습니다.label만약에typeof그 위치는number그러나 이것은 작동하지 않습니다.

<div>
  <div *ngIf='obj'>
    <label *ngFor="let key of keys; let i = index">
      <label class='key'>{{key}}:</label>
      <label class='number' *ngIf='typeof obj[key] === "number"'>
      <!-- label class='number' *ngIf='obj[key] | typeof === "number"' -->
        {{ obj[key] }}
      </label>
    </label>
  </div>
</div>

아이디어 있어요?

나는 또한 파이프를 만들어 그것을 얻었습니다.typeof값을 인쇄할 때 작동하지만 *ngIf 내부에서는 작동하지 않습니다.

글로벌 라이크window,typeof열거형 또는 정적 메서드를 템플릿 내에서 사용할 수 없습니다.구성요소 클래스 및 유형 스크립트 언어 구조의 구성원만 사용할 수 있습니다.

다음과 같이 도우미 메서드를 구성 요소에 추가할 수 있습니다.

isNumber(val): boolean { return typeof val === 'number'; }

그리고 그것을 처럼 사용합니다.

<label class='number' *ngIf='isNumber(obj[key])'>

현재 항목 및 반환 항목 유형을 수신하는 단순 파이프를 만들 수 있습니다.

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'typeof'
})
export class TypeofPipe implements PipeTransform {

  transform(value: any): any {
    console.log("Pipe works ", typeof value);
    return typeof value;
  }

}

이제 사용할 수 있습니다.typeof이렇게 html로 파이프를 연결합니다.

*ngIf = (item | typeof) === 'number'

그리고 위에서 언급한 것처럼 당신의 html에 함수 호출을 사용할 때 주의해야 합니다.함수 호출 대신 파이프를 사용하는 것을 선호했습니다.여기 Stackblitz의 예가 있습니다.첫 번째 경우 변경 감지 시 기능 호출이 트리거됩니다(예: 버튼 클릭).

또는 생성자 이름을 비교할 수 있습니다.

{{ foo.constructor.name === 'FooClass' }}

자세한 내용은 여기를 참조하십시오.

방금 이것을 시도해 봤는데, 함수 이름이 짧아져서 생산에서 작동하지 않습니다.다음과 같은 것을 사용하는 것이 더 안전합니다.

foo instanceof FooClass

그러나 다음과 같은 이유로 구성 요소/지시에서 이 작업을 수행해야 합니다.instanceOf템플릿에서 사용할 수 없습니다.

// In your component
isFoo(candidate){
    return candidate instanceof FooClass;
}

// in your template
{{isFoo(maybeFoo)}}

이것은 약간 해킹이지만, 만약 당신이 많은 곳에서 이것을 해야 하고 몇몇을 지나가는 것을 원하지 않는다면.isNumber주변에서 기능합니다. 조심스럽게 사용하면 작동할 수 있는 다른 옵션이 있습니다.

에 있는 속성 또는 메서드의 존재 여부를 확인할 수 있습니다.prototype검색할 수 있습니다.예를 들어, 모든 숫자에는 다음과 같은 함수가 있습니다.

<label class='number' *ngIf='obj[key] && obj[key].toExponential'>

찾을 수 있는 기능은call찾을 수 있는 문자열.toLowerCase검색 가능한 어레이의 경우concat,기타.

이 접근 방식은 완벽하지 않습니다. 왜냐하면 당신은 그것을 가질 수 있기 때문입니다.object확인하는 것과 같은 이름을 가진 속성을 소유하게 됩니다(단, 확인하는 속성이 전부라면 기본적으로 오리 타이핑입니다). 하지만 당신이 가지고 있는 값이 원시적이라는 것을 안다면 당신은 원시적인 속성을 할당할 수 없기 때문에 상태가 좋습니다(해당 주제에 대한 흥미로운 읽기).

고지 사항:저는 이것이 좋은 생각이고 유지보수가 가능하거나 휴대하기에 적합하지 않을 수도 있지만, 프로토타입이나 매우 제한적인 사용 사례를 위해 빠른 것이 필요하다면, 이것은 벨트에 장착하기에 합리적인 도구입니다.

이것을 간단하게 시도할 수 있습니다.

TS에서 변수를 설정합니다.

isNumber = isNaN;

템플릿에서

<p>{{isNumber(your value) ? 'do something' : 'else' }}</p>

언급URL : https://stackoverflow.com/questions/37511055/how-to-check-type-of-variable-in-ngif-in-angular2