使用打字稿从文本区域获取数据到角度4中的方法

Question

我正在研究 Angular 4。我有一个 HTML 页面，其中包含一些数据。

我想使用 JSON 格式的角度数据绑定将 HTML 数据获取到打字稿。

通过网络搜索后，我也在我的中添加了表单模块appmodule.ts。

我尝试过使用 HTML DOM。但我遇到了以下错误

任何人都可以帮助如何使用角度绑定，以便如果我更改数据，它也应该在后端更改

以及如何通过从 HTML 获取到 Typescript 来加载数据。

Thanks in advance

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
export class SystemDynamicsComponent implements OnInit {
  system: any;
  @ViewChild('diagramDiv')
  private diagramRef: ElementRef;
  @Input()
  get model(): go.Model {
    return diagram.model;
    console.log('get', diagram.model);
  }
  set model(val: go.Model) {
    diagram.model = val;
    console.log('set', diagram.model);
  }
  // @Output()
  modelChanged = new EventEmitter < go.ChangedEvent > ();
  constructor() {}
  ngOnInit() {}
  load() {
    let diagram = fromJson((document.getElementById('mySavedModel') as HTMLInputElement).value);
    let system = this.system
    console.log(this.system);
    return this.system;
  }
  save() {
    (document.getElementById('mySavedModel') as HTMLInputElement).value = diagram.toJson();
    this.system = system;
  }
}

.diagramsPanel {
  width: 100%;
  white-space: nowrap;
}

.diagramDiv {
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
  width: 80%;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.25/go-debug.js"></script>
<div>
  <p>
    system-dynamics works!
  </p>

  <div>
    <button id="SaveButton" (click)="save()">Save</button>
    <button (click)="load()">Load</button>
  </div>
  <textarea [ngModel]="system" id="mySavedModel" style="width:100%; height:400px">{ "class": "go.GraphLinksModel", "linkLabelKeysProperty": "labelKeys", "nodeDataArray": [ {"key":"grass", "category":"stock",
    "label":"Grass", "loc":"30 220", "label_offset":"0.5 0.5 0 30"}, {"key":"cloud1", "category":"cloud", "loc":"200 220"},
    {"key":"sheep", "category":"stock", "label":"Sheep", "loc":"30 20","label_offset":"0.5 0.5 0 -30"}, {"key":"cloud2",
    "category":"cloud", "loc":"200 20"}, {"key":"cloud3", "category":"cloud", "loc":"-150 220"}, {"key":"grass_loss", "category":"valve",
    "label":"grass_loss","label_offset":"0.5 0.5 0 20" }, {"key":"grazing", "category":"valve", "label":"grazing","label_offset":"0.5
    0.5 45 0" }, {"key":"growth", "category":"valve", "label":"growth","label_offset":"0.5 0.5 0 20" }, {"key":"sheep_loss",
    "category":"valve", "label":"sheep_loss","label_offset":"0.5 0.5 0 20" }, {"key":"k1", "category":"variable", "label":"good
    weather", "loc": "-80 100"}, {"key":"k2", "category":"variable", "label":"bad weather", "loc": "100 150"}, {"key":"k3",
    "category":"variable", "label":"wolves", "loc": "150 -40"} ], "linkDataArray": [ {"from":"grass", "to":"cloud1", "category":"flow",
    "labelKeys":[ "grass_loss" ]}, {"from":"sheep", "to":"cloud2", "category":"flow", "labelKeys":[ "sheep_loss" ]}, {"from":"grass",
    "to":"sheep", "category":"flow", "labelKeys":[ "grazing" ]}, {"from":"cloud3", "to":"grass", "category":"flow", "labelKeys":[
    "growth" ]}, {"from":"grass", "to":"grass_loss", "category":"influence"}, {"from":"sheep", "to":"sheep_loss", "category":"influence"},
    {"from":"grass", "to":"growth", "category":"influence"}, {"from":"grass", "to":"grazing", "category":"influence"}, {"from":"sheep",
    "to":"grazing", "category":"influence"}, {"from":"k1", "to":"growth", "category":"influence"}, {"from":"k1", "to":"grazing",
    "category":"influence"}, {"from":"k2", "to":"grass_loss", "category":"influence"}, {"from":"k3", "to":"sheep_loss", "category":"influence"}
    ] }
  </textarea>
</div>

Answer 1

你有很多可能性。您可以使用绑定到变量

[(ngmodel)]="system"

或者使用变量：

<textarea #myArea></textarea>
<button (click)="load(myArea.value)">Load</button>

或者来自@ViewChild()：

@ViewChild('myArea') myTextArea: any;