Two way data binding an array angular 6

Question

I wanted to know how to make a two-way data binding of an array variable. I would like to retrieve them in an input field and to be able to modify them. But I do not know how to do that with an array.

If I come to you it's because I did a lot of research that did not allow me to solve the problem. I read the doc angular.io but it did not help me either

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { componentsServices } from '../../services/microGrid.service';
import { Asset } from '../../models/assets';
import { FormGroup } from '@angular/forms';
import { CardsService } from '../dashboard/card/cards.service';
import { Network, DataSet, Node, Edge, IdType } from 'vis';
import { ASSETS } from '../../models/mock-assets';

declare var vis




@Component({
  selector: 'app-micro-grid-management',
  templateUrl: './micro-grid-management.component.html',
  styleUrls: ['./micro-grid-management.component.css']
})


export class MicroGridManagement implements OnInit {

  @Input('asset') asset: Asset;

  assets: Asset[];

  constructor(private router: Router, private route: ActivatedRoute, private cardService: CardsService, private assetService: componentsServices) { }

  public network: Network;
  selectedIndex;


  ngOnInit() {
    let nodes = [];
    let edges = [];
    console.log(ASSETS)

    this.getAssets();

    nodes = ASSETS;

    edges = [
      { from: 1, to: 2, arrows: "to" },
      { from: 2, to: 3, arrows: "to" },
      { from: 3, to: 4, arrows: "to" },
      { from: 4, to: 5, arrows: "to" },
      { from: 5, to: 6, arrows: "to" },
      { from: 6, to: 7, arrows: "to" },
      { from: 8, to: 9, arrows: "to" },
      { from: 9, to: 1, arrows: "to" },
    ]

    let data = {
      nodes: nodes,
      edges: edges,
    };


    var myDiv = document.getElementById("network");

    var options = {
      interaction: { hover: true },
      nodes: { 
        shadow: true,
        shape: 'square'
      },
      edges: { shadow: true },
    };

    var net = new vis.Network(myDiv, data, options);


  getAssets(): void {
    this.assetService.getAssets()
    .subscribe(data => this.assets = data.slice(1,5));
  }

}

I know this is not the way to go, that's why I need your help. I want to know what I'm doing wrong

<div *ngFor="let asset of assets">
     <input [(ngModel)]="Assets" value="{{asset.label}}">
</div>

here is the model that I use but I will also have it displayed in inputs to make a two way data binding. I read a lot of things but I can not fix the problem. My fields inputs is empty

    export interface Asset {
        id: number;
        label: string;
        color: string;
        shape: string;
        currentP: string;
        energy: string;
        setpp: string;
        energy2: string;
        currentq: string;
        setq: string;
        required: boolean;
    }

    import { Asset } from './assets';

    export const ASSETS: Asset[] = [
        {
            id: 1,
            label: 'PV Panels',
            shape: 'square',
            color:'#4286f4',
            currentP: '100',
            energy: 'kW',
            setpp: '100',
            currentq: '2',
            energy2: 'kVar',
            setq: '2',
            required: true
        },
        {
            id: 2,
            label: 'Wind Turbines',
            shape: 'square',
            color:'#4286f4',
            currentP: '100',
            energy: 'kW',
            setpp: '100',
            currentq: '2',
            energy2: 'kVar',
            setq: '2',
            required: true
        },
        {
            id: 3,
            label: 'Gensets',
            shape: 'square',
            color: '#f4d041',
            currentP: '100',
            energy: 'kW',
            setpp: '100',
            currentq: '2',
            energy2: 'kVar',
            setq: '2',
            required: true
        }
    ];

I think you did not understand my request. The loops I have no problem with. I do not know how to do two way data binding from an array. that's all. I know how to use ngFor is not the problem. I do not know how to use ngModel with an array — Kirik Khu, Sep 04 '18 at 07:20
Then let me redirect you to [duplicates](https://stackoverflow.com/questions/40314732/angular-2-2-way-binding-with-ngmodel-in-ngfor) of your answer. Next time, consider googling or searching on SOF for an answer. Also, if you post a question, be sure to provide a [mcve] showing what you already tried to resolve your issue. — , Sep 04 '18 at 07:26
You should provide a [mcve] on https://stackblitz.io that reproduces the issue, this would be easier to tell you what is wrong with your code (although nothing seems to be wrong at first sight) — , Sep 04 '18 at 09:45
my service return data. Look at the img a update @trichetriche — Kirik Khu, Sep 04 '18 at 10:02
@kirik I don't quite understand what you are trying to achieve. Could elaborate more? — dK-, Sep 04 '18 at 10:12
@dK- If you look at the image I uploaded you can see nodes import from my assets service. now I recover my data in inputs. I want that when I modify the inputs it also modifies the data in the nodes — Kirik Khu, Sep 04 '18 at 10:23
"I would like to retrieve them in an input field and to be able to modify them" – in an input *field* or in input *fields*? If that should be one field, how should its content be converted to the array? trichetriche is right, you should reduce your code to the only necessary bits so it's clear what do you have problems with. If it's editing an array via an input field, you should probably remove all the stuff about vis.js from your question. One problem at a time. Best regards — YakovL, Sep 04 '18 at 21:33

score 0 · Answer 1 · answered Sep 04 '18 at 22:55

Could it be as simple as:

<div *ngFor="let asset of assets; let i = index">
   <input (change)="onChange($event, i)">
</div>

And in your ts file:

onChange($event, i) {
   this.yourArray[i].value = $event.target.value;
}

The example is for quick turn around only, you should consider immutable approach for your solution.

Two way data binding an array angular 6

1 Answers1