两种方式数据绑定数组角度 6答案

【问题标题】：Two way data binding an array angular 6两种方式数据绑定数组角度 6
【发布时间】：2018-09-04 06:47:57
【问题描述】：

我想知道如何对数组变量进行双向数据绑定。我想在输入字段中检索它们并能够修改它们。但我不知道如何使用数组来做到这一点。

如果我来找你，那是因为我做了很多研究，但无法解决问题。我阅读了文档 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
        }
    ];

【问题讨论】：

我认为你没有理解我的要求。我没有问题的循环。我不知道如何从数组进行双向数据绑定。就这样。我知道如何使用 ngFor 不是问题。我不知道如何将 ngModel 与数组一起使用
那么让我将您重定向到您的答案中的duplicates。下次，考虑在 SOF 上搜索或搜索答案。此外，如果您发布问题，请务必提供 minimal reproducible example，显示您已经尝试解决的问题。
我编辑我的代码以使其更清晰@trichetriche
您确定您的服务正在返回数据吗？
您应该在stackblitz.io 上提供一个minimal reproducible example 以重现该问题，这样更容易告诉您您的代码有什么问题（尽管乍一看似乎没有任何问题）跨度>

标签： javascript angular vis.js

【解决方案1】：

可以这么简单：

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

该示例仅用于快速周转，您应该为您的解决方案考虑不可变的方法。

【讨论】：