* ngFor를 사용하여 액세스 키 및 오브젝트 값
나는 비트가 도착하는 방법에 대해 혼란 스러워요 key및 value사용하는 동안 angular2에서 객체의 *ngFor객체를 통해 반복합니다. angular 1.x에는 다음과 같은 구문이 있습니다.
ng-repeat="(key, value) in demo"
하지만 angular2에서 동일한 작업을 수행하는 방법을 모르겠습니다. 나는 성공하지 않고 비슷한 것을 시도했다.
<ul>
<li *ngFor='#key of demo'>{{key}}</li>
</ul>
demo = {
'key1': [{'key11':'value11'}, {'key12':'value12'}],
'key2': [{'key21':'value21'}, {'key22':'value22'}],
}
내 시도와 함께 plnkr이 있습니다 : http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
어떻게 얻을 수 key1및 key2사용하여 동적으로 *ngFor? 광범위하게 검색 한 후 파이프를 사용한다는 아이디어를 찾았지만 어떻게 해야할지 모르겠습니다. angular2에서 동일한 작업을 수행하기위한 내장 파이프가 있습니까?
이 Object.keys템플릿에 액세스 할 수 있으며 사용할 *ngFor.
@Component({
selector: 'app-myview',
template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})
export class MyComponent {
objectKeys = Object.keys;
items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
constructor(){}
}
마찬가지로 각도 (V6.1.0)의 최신 버전 , 각도 팀은 새로 만들기로 명명 같은 위해 파이프에 내장 추가했다 keyvalue에,지도, 객체를 통해 당신에게 반복 처리를하기 위해 파이프와 배열 common각 패키지의 모듈. 예를 들어-
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
일하는 예
더 유용한 정보는 여기를 확인하십시오-
- https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
- https://github.com/angular/angular/commit/2b49bf7
Angular v5 이하를 사용하거나 파이프를 사용하려면이 답변을 따르십시오.
각 요소에 대한 키 목록을 반환하는 사용자 지정 파이프를 만들 수 있습니다. 그런 것 :
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push(key);
}
return keys;
}
}
다음과 같이 사용하십시오.
<tr *ngFor="let c of content">
<td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>
편집하다
키와 값이 모두 포함 된 항목을 반환 할 수도 있습니다.
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
다음과 같이 사용하십시오.
<span *ngFor="let entry of content | keys">
Key: {{entry.key}}, value: {{entry.value}}
</span>
최신 정보
6.1.0-beta.1 에서는 KeyValuePipe 가 https://github.com/angular/angular/pull/24319 에 도입되었습니다.
<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
{{ item.key }} - {{ item.value }}
</div>
이전 버전
또 다른 방법은 NgForIn다음과 같이 사용될 지시문 을 작성 하는 것입니다.
<div *ngFor="let key in obj">
<b>{{ key }}</b>: {{ obj[key] }}
</div>
ngforin.directive.ts
@Directive({
selector: '[ngFor][ngForIn]'
})
export class NgForIn<T> extends NgForOf<T> implements OnChanges {
@Input() ngForIn: any;
ngOnChanges(changes: NgForInChanges): void {
if (changes.ngForIn) {
this.ngForOf = Object.keys(this.ngForIn) as Array<any>;
const change = changes.ngForIn;
const currentValue = Object.keys(change.currentValue);
const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined;
changes.ngForOf = new SimpleChange(previousValue, currentValue, change.firstChange);
super.ngOnChanges(changes);
}
}
}
Angular 6.1에서 키값 파이프를 사용할 수 있습니다 .
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
그러나 결과 목록을 키 값으로 정렬하는 것은 불편합니다. 중립적 인 것이 필요한 경우 :
@Pipe({ name: 'keyValueUnsorted', pure: false })
export class KeyValuePipe implements PipeTransform {
transform(input: any): any {
let keys = [];
for (let key in input) {
if (input.hasOwnProperty(key)) {
keys.push({ key: key, value: input[key]});
}
}
return keys;
}
}
pure : false 파이프 속성 을 지정하는 것을 잊지 마십시오 . 이 경우 입력 참조가 변경되지 않은 경우에도 변경 감지주기마다 파이프가 호출됩니다 (물체에 속성을 추가 할 때도 마찬가지 임).
@Thierry의 답변을 예를 들어 설명합니다.
key and value* ngFor 루프에서 가져올 파이프 나 메소드가 없습니다 . 동일한 파이프를 만들어야합니다. thierry가 말했듯이 여기에 코드가있는 대답이 있습니다.
** 파이프 클래스는 입력 값과 선택적 매개 변수 문자열 배열을 사용하여 변환 된 값을 리턴하는 PipeTransform 인터페이스의 변환 메소드를 구현합니다.
** 변환 방법은 파이프에 필수적입니다. PipeTransform 인터페이스는 해당 메소드를 정의하고 툴링 및 컴파일러를 모두 안내합니다. 선택 사항입니다. Angular는 변환 방법을 찾고 상관없이 실행합니다. 자세한 정보는 파이프를 참조하십시오.
import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
pipes: [KeysPipe]
})
export class AppComponent {
demo = {
'key1': 'ANGULAR 2',
'key2': 'Pardeep',
'key3': 'Jain',
}
}
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
HTML 부분은 다음과 같습니다.
<ul>
<li *ngFor='#key of demo | keys'>
Key: {{key.key}}, value: {{key.value}}
</li>
</ul>
Plnkr 작업 http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview
RC로 업데이트
의견의 user6123723 (thanks)이 제안한대로 여기 업데이트입니다.
<ul>
<li *ngFor='let key of demo | keys'>
Key: {{key.key}}, value: {{key.value}}
</li>
</ul>
@Marton은 파이프가 각 변경 감지에 대해 새 컬렉션을 생성한다는 이유로 허용 된 답변 에 대해 중요한 반대 의견을 제시 했습니다. 대신 뷰가 다음과 같이 사용할 수있는 다양한 유틸리티 기능을 제공하는 HtmlService를 만듭니다.
@Component({
selector: 'app-myview',
template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>`
})
export class MyComponent {
items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'};
constructor(private html: HtmlService){}
}
@Injectable()
export class HtmlService {
keys(object: {}) {
return Object.keys(object);
}
// ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others...
}
이미 Lodash를 사용하고 있다면 키와 값을 모두 포함하는 간단한 접근 방식을 수행 할 수 있습니다.
<ul>
<li *ngFor='let key of _.keys(demo)'>{{key}}: {{demo[key]}}</li>
</ul>
타이프 스크립트 파일에 다음을 포함하십시오.
import * as _ from 'lodash';
내 보낸 구성 요소에 다음을 포함하십시오.
_: any = _;
파이프에 감사하지만 각도 2 RC5에서 사용할 수 있기 전에 약간 변경해야했습니다. 파이프 가져 오기 행을 변경하고 키 배열 초기화에 모든 유형을 추가했습니다.
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value) {
let keys:any = [];
for (let key in value) {
keys.push( {key: key, value: value[key]} );
}
return keys;
}
}
여기에 대한 답변 중 어느 것도 상자에서 나에게 도움이되지 않았습니다.
pipes/keys.ts내용으로 작성 :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
transform(value:any, args:string[]): any {
let keys:any[] = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
다음에 추가하십시오 app.module.ts(주 모듈) :
import { KeysPipe } from './pipes/keys';
그런 다음 모듈 선언에 다음과 같이 추가하십시오.
@NgModule({
declarations: [
KeysPipe
]
})
export class AppModule {}
그런 다음 뷰 템플릿에서 다음과 같은 것을 사용할 수 있습니다.
<option *ngFor="let entry of (myData | keys)" value="{{ entry.key }}">{{ entry.value }}</option>
여기에 좀 더 읽으려면 내가 찾은 좋은 참조입니다.
다른 멋진 파이프 중에서 이것을 수행하는 멋진 라이브러리가 있습니다. ngx-pipes 라고 합니다.
예를 들어 키 파이프는 객체의 키를 반환하고 값 파이프는 객체의 값을 반환합니다.
키 파이프
<div *ngFor="let key of {foo: 1, bar: 2} | keys">{{key}}</div>
<!-- Output: 'foo' and 'bar -->
가치관
<div *ngFor="let value of {foo: 1, bar: 2} | values">{{value}}</div>
<!-- Output: 1 and 2 -->
사용자 정의 파이프를 만들 필요가 없습니다. :)
간단한 해결책은 다음과 같습니다.
이것을 위해 타이프 스크립트 반복자를 사용할 수 있습니다
import {Component} from 'angular2/core';
declare var Symbol;
@Component({
selector: 'my-app',
template:`<div>
<h4>Iterating an Object using Typescript Symbol</h4><br>
Object is : <p>{{obj | json}}</p>
</div>
============================<br>
Iterated object params are:
<div *ngFor="#o of obj">
{{o}}
</div>
`
})
export class AppComponent {
public obj: any = {
"type1": ["A1", "A2", "A3","A4"],
"type2": ["B1"],
"type3": ["C1"],
"type4": ["D1","D2"]
};
constructor() {
this.obj[Symbol.iterator] = () => {
let i =0;
return {
next: () => {
i++;
return {
done: i > 4?true:false,
value: this.obj['type'+i]
}
}
}
};
}
}
데모 유형을 배열로 변경하거나 객체를 반복하고 다른 배열로 푸시
public details =[];
Object.keys(demo).forEach(key => {
this.details.push({"key":key,"value":demo[key]);
});
그리고 HTML에서 :
<div *ngFor="obj of details">
<p>{{obj.key}}</p>
<p>{{obj.value}}</p>
<p></p>
</div>
색인 사용 :
<div *ngFor="let value of Objects; index as key">
용법:
{{key}} -> {{value}}
Object.keys 가이 문제에 대한 최상의 솔루션이라고 생각합니다. 이 답변을 발견하고 Object.keys가 [ 'key1', 'key2'] 대신 [ '0', '1']을 제공하는 이유를 알아 내려고 노력하는 사람이라면주의해야 할 점은 " of "및"in ":
나는 이미 비슷한 Object.keys를 사용하고 있었다 :
interface demo {
key: string;
value: string;
}
createDemo(mydemo: any): Array<demo> {
const tempdemo: Array<demo> = [];
// Caution: use "of" and not "in"
for (const key of Object.keys(mydemo)) {
tempdemo.push(
{ key: key, value: mydemo[key]}
);
}
return tempdemo;
}
그러나 대신
for (const key OF Object.keys(mydemo)) {
실수로 썼다
for (const key IN Object.keys(mydemo)) {
어떤 오류없이 완벽하게 "작동"하고 반환
[{key: '0', value: undefined}, {key: '1', value: undefined}]
인터넷 검색과 저주에 약 2 시간이 걸렸습니다.
(이마 때리고)
이것을 시도하여 동적 객체의 키 를 얻을 수 있습니다
myObj['key']
지금은 이렇게해야합니다. 파이어베이스에서받은 객체를 변환하고 싶지 않기 때문에 매우 효율적이지 않습니다.
this.af.database.list('/data/' + this.base64Email).subscribe(years => {
years.forEach(year => {
var localYears = [];
Object.keys(year).forEach(month => {
localYears.push(year[month])
});
year.months = localYears;
})
this.years = years;
});
참고 URL : https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor
'Programing' 카테고리의 다른 글
| Visual Studio에서 ReSharper를 비활성화하고 다시 활성화하려면 어떻게해야합니까? (0) | 2020.03.04 |
|---|---|
| Swift를 사용하여 문자열을 Int로 변환 (0) | 2020.03.04 |
| fastcgi 및 django를 사용하여 nginx의 오류 로그를 어디에서 찾을 수 있습니까? (0) | 2020.03.04 |
| jQuery를 사용한 이메일 검증 (0) | 2020.03.04 |
| Windows의 localhost에서 현재 포트를 사용하는 프로세스를 종료하는 방법은 무엇입니까? (0) | 2020.03.04 |