ngForIn可用於角度4嗎？

我正在嘗試使用*ngFor而不是使用in迭代對象的屬性。當我嘗試這樣做ngForIn可用於角度4嗎？

@Controller({ 
    selector: 'sample-controller', 
    template: ` 
    <ul> 
     <li *ngFor="let i in obj"> 
     <b>{{i}}</b>: {{obj[i]}} 
     </li> 
    </ul>` 
}) 
class SampleController { 
    obj = {a: 1, b: 2} 
}

我得到的錯誤信息：

不能綁定到「ngForIn」，因爲它不是「禮」的已知屬性。

我已經包括在@NgModule的此組件的imports部FormsModule和BrowserModule。

是否可以在li上使用ngForIn，如果沒有，是否有一個慣用的替代方案？

來源

2017-07-17 Eli Sadoff

難道[這個問題]（https://stackoverflow.com/a/34561169/2908576）？ – HaveSpacesuit

@HaveSpacesuit不，我想顯式迭代對象的屬性，而不是遍歷迭代像數組。 –

https://medium.com/@jsayol/having-fun-with-angular-extending-ngfor-to-support-for-in-f30c724967ed – Alex

由於AJT_82在評論中提及您可以創建用於上述目的的特殊指令。它會根據NgForOf<T>指令：

interface NgForInChanges extends SimpleChanges { 
    ngForIn?: SimpleChange; 
    ngForOf?: SimpleChange; 
} 

@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); 
    } 
    } 
}

Plunker Example

來源

2017-07-17 19:08:06 yurzui

這正是我所需要的，非常感謝你！ –

最簡單的方法是使用Object.values()和Object.keys()將對象轉換爲數組。例如，請查看this plunker。

如果您想要訪問密鑰以及值，您可以在*ngFor中包含索引。

模板：

<ul> 
    <li *ngFor="let item of array; let index = index;"> 
    <b>{{keys[index]}}</b> value: {{item}}, index: {{index}} 
    </li> 
</ul>

組件打字稿：

export class App { 
    obj = {a: 1, b: 2} 
    array = []; 
    keys = []; 
    constructor() { 
    } 

    ngOnInit() { 
    this.array = Object.values(this.obj); 
    this.keys = Object.keys(this.obj); 
    } 
}

來源

2017-07-17 19:03:38

ngForIn可用於角度4嗎？

回答

相關問題