*ngFor를 사용하여 개체 키 및 값 액세스
어떻게 해야 할지 좀 헷갈린다.key그리고value사사도 2의 도도 2를 *ngFor그 대상을 반복하기 위해서.각 1.x에는 다음과 같은 구문이 있다는 것을 안다.
ng-repeat="(key, value) in demo"
하지만 각도2로 같은 걸 어떻게 해야 할지 모르겠어.나는 성공하지 못한 비슷한 것을 시도했다.
<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결과 광범위하게 검색한 결과 파이프를 사용할 생각을 발견했지만 어떻게 해야 할지 모르겠다.각도2로 같은 작업을 할 수 있는 내장 파이프가 있는가?
각도(v6.1.0)의 최신 릴리즈에서와 같이, 각도 팀은 동일한 이름을 가진 파이프를 새로 추가했다.keyvalue파이프에서 객체, 지도 및 배열을 반복할 수 있도록 지원common각 포장의 모듈예를 들어 -
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
원래 순서를 유지하려면keyvalue:onCompare
구성 요소에서 콜백 정의:
// ...
import {KeyValue} from '@angular/common';
@Component(/* ... */)
export class MyComponent {
private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
return -1;
}
}
작업 대상 예제
더 유용한 정보를 얻으려면 여기를 참조하십시오.
- https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
- https://github.com/angular/angular/commit/2b49bf7
각도 v5 이하를 사용 중이거나 파이프를 사용하여 달성하려는 경우 이 답변을 따르십시오.
가지고 있다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(){}
}
사용자 정의 파이프를 생성하여 각 요소의 키 목록을 반환할 수 있다.비슷한 것:
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-베타.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.cs.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);
}
}
}
각도 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 루서에. 것을 그래서 우리는 같은 것을 위해 맞춤 파이프를 만들어야 한다.그들이 말했듯이, 여기에 코드의 답이 있다.
** 파이프 클래스는 입력 값과 파라미터 문자열의 선택적 배열을 취하여 변환 값을 반환하는 PipeTransform 인터페이스의 변환 방법을 구현한다.
** 파이프에는 변환 방법이 필수적이다.PipeTransform 인터페이스는 그 방법을 정의하고 툴링과 컴파일러 모두를 안내한다.선택사항이며, Angle은 변환 방법을 찾고 실행한다.파이프에 대한 자세한 내용은 여기를 참조하십시오.
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로 업데이트
사용자 6123723(고마운트)이 제안하는 대로, 여기에서 코멘트를 하는 것이 업데이트다.
<ul>
<li *ngFor='let key of demo | keys'>
Key: {{key.key}}, value: {{key.value}}
</li>
</ul>
@Marton은 파이프가 각 변경 검출에 대해 새로운 컬렉션을 만든다는 이유로 받아들여진 답변에 대해 중요한 이의를 제기했다.대신 다음과 같이 뷰에서 사용할 수 있는 다양한 유틸리티 기능을 제공하는 HTML 서비스를 만들겠다.
@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 = _;
Angul 8에 대한 답을 추가할까 생각 중:
루핑을 위해 수행할 수 있는 작업:
<ng-container *ngFor="let item of BATCH_FILE_HEADERS | keyvalue: keepOriginalOrder">
<th nxHeaderCell>{{'upload.bulk.headings.'+item.key |translate}}</th>
</ng-container>
또한 원본 주문을 유지하기 위해 위의 배열이 필요한 경우 이를 클래스 내에 선언하십시오.
public keepOriginalOrder = (a, b) => a.key;
파이프는 고맙지만 각진 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;
}
}
인덱스 사용:
<div *ngFor="let value of Objects; index as key">
사용량:
{{key}} -> {{value}}
여기서 나온 답들 중 어떤 것도 내게 효과가 없었다. 여기 나에게 효과가 있었던 것이 있다.
만들다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>
여기 더 읽고 싶다면 내가 찾아낸 좋은 참고 문헌이 있다.
당신은 그것을 사용할 수 있다.keyvalue샘플 코드가 제공된 파이프:
<div style="flex-direction: column">
<app-cart-item
class="cart-item"
*ngFor="let keyValuePair of this.allProductRecords | keyvalue"
[productRecord]="keyValuePair.value"
(removeProduct)="removeProductFromCart(keyValuePair.key)"
></app-cart-item>
<br />
<p style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bolder">
Total ${{ getTotalPurchaseAmount() }}
</p>
</div>
다른 멋진 파이프들 중에 이런 일을 하는 정말 멋진 도서관이 있다.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>
나는 오브젝트를 생각한다.열쇠는 이 문제에 대한 최선의 해결책이다.이 답을 우연히 발견하여 Object의 이유를 알아내려고 애쓰는 모든 사람을 위해.키는 ['key1', 'key2' 대신 ['0', '1']을 제공하는 것이며, 주의사항인 "of"와 "in"의 차이를 주의하십시오.
나는 이미 오브젝트를 사용하고 있었다.키, 이와 유사한 기능:
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시간 동안 구글링과 욕설만 했다.
(이마 슬랩)
일단 이렇게 해야 해, 소방서에서 받은 물건을 개조하고 싶지 않아서 효율적이지 못하다는 거 알아.
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;
});
이렇게 하면 동적 객체의 키를 얻을 수 있다.
myObj['key']
다음과 같이 어레이 생성
tags = [
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
},
{
name : 'Aliko Dogara',
amount : '60,000',
purpose: 'Office repairs'
}
];
항상 효과가 있다
참조URL: https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor
'programing' 카테고리의 다른 글
| Resact Native 벡터 아이콘을 사용하는 방법? (0) | 2022.03.24 |
|---|---|
| vue에서 조건부 클래스와 조건부 클래스의 결합 (0) | 2022.03.24 |
| 부트스트랩-뷰:b-table에 열로 표시된 b-form-checkbox의 여러 배열로 Role Permissions 구현.작동하지 않음 (0) | 2022.03.24 |
| Python에서 XPath를 사용하는 방법? (0) | 2022.03.24 |
| 가져오기 경로 내부의 @는 무엇을 의미하나? (0) | 2022.03.23 |