使用角度2+从对象中获取键和值[重复]

Question

我有一个这样的对象：

myComponent.ts

this.detailsStruct = this.newParameter.struct;
 //the value of detailsStruct is:
            //{0: "something",
            // 5: "somethingElse"}

detailsstruct 的数据来自我的 mongoDb，我希望有一个输入表单来显示我的对象的键和值。在 html 中，我做了类似的事情：

myComponent.html

<div class="form-group" *ngFor="let s of detailsStruct ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="s.value" placeholder="" name="{{s[i]}}">
   </div>
</div>

我试图从我的对象中获取一些东西，但我写的东西不起作用。 有什么建议？谢谢

Answer 1

你可以使用这种方式，我希望这对你的数据有帮助

for (let obj of this.detailsStruct) {
        for (let prop of Object.keys(obj)) {
            console.log("value-" + obj[prop]);
            console.log("key-" + [prop]);
        }
    }

Answer 2

你可以试试：

<div class="form-group" *ngFor="let key of objectKeys(detailsStruct) ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="detailsStruct[key]" placeholder="" name="{{detailsStruct[key]}}">
   </div>
</div>

ts：

objectKeys = Object.keys;
  detailsStruct = {0: "something",
            5: "somethingElse"}

DEMO.

Answer 3

如果detailsStruct 是一个对象，那么，

<div class="form-group" *ngFor="let s of Object.keys(detailsStruct) ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="detailsStruct[s]" placeholder="" name="s{{i}}">
   </div>
</div>

Answer 4

请试试这个代码：链接https://stackblitz.com/edit/angular-hh82ed

<div class="form-group" *ngFor="let s of detailsStruct ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="s[i]" placeholder="" name="{{s[i]}}">
   </div>
</div>

import {AfterViewInit, Component, ElementRef, ViewChild,Renderer2,OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  detailsStruct=[];
  detailsStruct = [{0:"one"},{1:"two"}];
}

谢谢