Двойная привязка к элементам коллекции не работает - PullRequest
Новая
       29

Двойная привязка к элементам коллекции не работает

0 голосов
/ 28 ноября 2018

Здравствуйте, у меня возникла следующая проблема.

Я пытаюсь использовать директиву ngFor для печати каждого value-pair структуры, подобной карте, но, похоже, директива ngModel не работаетпо какой-то причине. Если я регистрирую коллекцию, то все в порядке. Если я печатаю, то связываю ее одним способом, он все равно печатает пары нормально. При попытке двустороннего связывания он покажет только первую пару ключ-значение. 

export interface KVPair{
    key:string;
    value:string;
}
export class KVMap{
    items:Array<KVPair>;
    public getPair(key:string):KVPair{
        return {key:key,value:(this.items[key]).toString()};
    }
    constructor() {
       this.items=new Array<KVPair>();

    }
}

Компонент 

@Component({
  selector: 'app-editor-view',
  templateUrl: './editor-view.component.html',
  styleUrls: ['./editor-view.component.css','../../Styles/common-controls.css']
})
export class NodeEditorComponent implements OnInit {
 @Input()
 public model:TreeModel;

 public map:KVMap=null;

  private formMap(model:TreeModel){
    if(model.payload==null){
      return null;
    }
    this.map=new KVMap();
    this.map.items.splice(0);
    var keys=Object.keys(model.payload);
    for(let k of keys){
      this.map.items.push({key:k,value:model.payload[k]});
    }
    this.map.items.forEach((kv)=>{
        console.log("key:"+kv.key+" - "+ "value:"+kv.value);
    })
  }
  constructor() { }
  onSubmit(form:NgForm){
  }
  ngOnInit() {
    this.formMap(this.model);
  }
}

HTML 

<div>
    <form #jsonForm="ngForm">
        <div class="editor-header"> </div>
        <div class="editor-content">
            <ul class="list">
                <li *ngFor="let item of this.map.items">
                    key:{{item.key}}-value:{{item.value}}   //prints it fine
                    <div class="formPair">
                        <div class="key">
                            <div class="hblock">
                                <input class="hblock" [(ngModel)]="item.key" type="text" name="item.key">
                            </div>    //prints only the first kvpair
                        </div>
                        <div class="value">
                            <div class="hblock">
                                <input class="hblock" [(ngModel)]="item.value" type="text" name="item.value">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="editor-footer">
        </div>
    </form>
    {{jsonForm.value |json}}
</div>

Модель и образец 

  export interface TreeModel{
    id:string;
    payload?: any;
    children:Array<TreeModel> ;
}

let a: TreeModel = {
      id: "Adrian",
      payload: {
        profession:"doctor",
        age: 33,
        city: "Bucharest"
      },
      children: [
        {
          id: "Dan",
          payload: {
            married:true,
            children:99
          },
          children: [
            {
              id: "Daniel", children: [
                { id: "Ionut Mirea", children: [] }
              ]
            }
          ]
        },
        {
          id: "Marian", payload:{
            sex:"Masculine",
            wage:2000
          },children: [
            { id: "Farcas", children: [] },
            { id: "Liviu", children: [] }
          ]
        }
      ]
    };
...