Двухстороннее связывание данных с массивом углов 6 - PullRequest
Новая
       6

Двухстороннее связывание данных с массивом углов 6

0 голосов
/ 04 сентября 2018

Я хотел знать, как сделать двустороннюю привязку данных к переменной массива. Я хотел бы получить их в поле ввода и иметь возможность изменять их. Но я не знаю, как это сделать с массивом.

Если я приду к вам, это потому, что я провел много исследований, которые не позволили мне решить проблему. Я прочитал документ angular.io, но он мне тоже не помог 

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

}

Я знаю, что это не тот путь, поэтому мне нужна ваша помощь. Я хочу знать, что я делаю не так 

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

вот модель, которую я использую, но я также буду отображать ее во входных данных для двухсторонней привязки данных. Я много читаю, но не могу решить проблему. Мои поля ввода пусты 

    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
        }
    ];

enter image description here

1 Ответ

0 голосов
/ 05 сентября 2018

Может быть так просто: 

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

А в вашем файле ts: 

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

Пример приведен только для быстрого разворота, вам следует рассмотреть неизменный подход к вашему решению.

...