如何将角度属性绑定到模型作为数组?

Question

我的组件是

import { Component } from '@angular/core';
export class LocationModel {
name: string;
position: { 
center: any[]
}
} 
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
model: LocationModel = new LocationModel();
onSubmit() {    
console.log(this.model);
}
}

HTML组件模板是：

<form (ngSubmit)="onSubmit(f)">
Location name: 
<input 
type="text"
[(ngModel)]="model.name"
name="firstName"><br>
lon: 
<input 
type="text" 
[(ngModel)]="model.positon.center[1]"
name="lon"><br>
lat:
<input 
type="text" 
[(ngModel)]="model.positon.center[0]"
name="lat"><br>
<input type="submit" value="Submit">
</form>
{{model|json}}

但是我无法创建如下所示的 json 模板：

{ "name": "some name", "position": { "center": [ 30.6067, 490.5563189 ] } }

Answer 1

你能不能试试这样，

将initial value分配给center

export class LocationModel {
name: string;
position: { 
center: ["",""]
}
} 

目录：

<form (ngSubmit)="onSubmit(f)">
Location name: 
<input 
type="text"
[(ngModel)]="model.name"
name="firstName"><br>
lon: 
<input 
type="text" 
[(ngModel)]="model.positon.center[1]"
name="lon"><br>
lat:
<input 
type="text" 
[(ngModel)]="model.positon.center[0]"
name="lat"><br>
<input type="submit" value="Submit">
</form>
{{model|json}}