javascript - 两种方式数据绑定数组角度 6
问题描述
我想知道如何对数组变量进行双向数据绑定。我想在输入字段中检索它们并能够修改它们。但我不知道如何使用数组来做到这一点。
如果我来找你,那是因为我做了很多研究,但没有让我解决问题。我阅读了文档 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
}
];
解决方案
可以这么简单吗:
<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;
}
该示例仅用于快速周转,您应该为您的解决方案考虑不可变的方法。
推荐阅读
- android - 停止 MediaRecorder 时出现 java.lang.IllegalStateException
- kubernetes - Jupyterhub 安装 Hub Pod Pending 状态
- javascript - 类型错误:react Js 中的预期参数 accessToken
- python - Selenium 创建多个浏览器会话
- excel - 使用 VBA 从另一个程序运行 Excel
- flask - flask-admin + sqlalchemy - 在父模型视图中修改相关记录的“集合”
- django - 从 request.FILES 中获取项目
- azure-sql-database - 在 Azure sql 中引入和处理数据的选项
- c++ - 我可以在初始化之前使用 std::array 成员变量中的 data() 指针吗?发出警告
- java - 实现上界泛型方法