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

Question

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

我想使用 angular 数据绑定以 JSON 格式将 HTML 数据提取到打字稿。

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

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

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

和如何通过从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

您可能应该使用 JSON.parse() in order to create a JSON Javascript object, so that you could manipulate it, and JSON.stringify() 将其作为字符串放回 DOM。

load() {
    let diagram = JSON.parse((document.getElementById('mySavedModel') as HTMLInputElement).value); // diagram value is not saved?
    let system = this.system // local variable system is not used?
    console.log(this.system);
    return this.system;
  }
  save() {
    (document.getElementById('mySavedModel') as HTMLInputElement).value = JSON.stringify(diagram);
    this.system = system;
  }

Answer 2

你有很多可能性。您可以使用

绑定到变量

[(ngmodel)]="system"

或使用变量：

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

或来自@ViewChild():

@ViewChild('myArea') myTextArea: any;

Answer 3

我已经阅读了你的代码，我只改变了两件事，我将系统初始化为空 system:any='' 在 TypeScript 中使用双向绑定 [(ngModel)]="system" 在 HTML 就是这样。

我还修改了 TypeScript 中的 textArea，正如您从我将系统设置为 "Waqas" 的输出快照中看到的那样，它出现在上一个快照中的 TextArea 中。

01- 正如你所看到的输入页面区域和输入的文本

输出在调试模式下显示在 TypeScript 中。

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

Getting data from textarea to method in angular 4 using typescript

html

angular

typescript

data-binding

angular4-forms