Передача HTML-переменных в угловой компонент

Question

Я пытаюсь передать элементы, записанные в поле текстового поля на моей веб-странице, переменным в файле компонента. Эти переменные затем будут использоваться в служебном файле, в котором есть функциональная ссылка на запрос POST, который я сделал на стороне python / SQLAlchemy. Я использую Flask с python / SQLAlchemy на серверной части и Angular CLI 7.0.5. Вот что у меня есть:

<div class = "container">
<input id="InsertItemName" [(ngModel)]="InsertItemName"/>
<input id="InsertItemManu" [(ngModel)]="InsertItemManu"/>
<input id="InsertItemType" [(ngModel)]="InsertItemType"/>
<button (click)="sendValues()">Send</button>
</div>

модификация-page.component.html:

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Data } from '@angular/router';
import { HttpResponse } from '@angular/common/http';
import { SelectItem } from 'primeng/components/common/selectitem';
import { MenuItem } from 'primeng/api';
import { ModifyService, ItemsData } from '../modify.service'
import { PARAMETERS } from '@angular/core/src/util/decorators';



@Component({
  selector: 'app-modify-page',
  templateUrl: './modify-page.component.html',
  styleUrls: ['./modify-page.component.css']
})
export class ModifyPageComponent implements OnInit {

  InsertItemName: string;
  InsertItemManu: string;
  InsertItemType: string;

  insertItems: ItemsData;


  constructor(
    private modifyService: ModifyService,
    private route: ActivatedRoute
  ) {
   }

  ngOnInit() {
    this.insertItems.name = this.InsertItemName;
    this.insertItems.manufacture = this.InsertItemManu;
    this.insertItems.type = this.InsertItemType;

  }


  sendValues(): void {
    console.log(this.InsertItemName, this.InsertItemManu, this.InsertItemType)

    this.modifyService.postInputItems(this.insertItems)


}


}

modify.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface ItemsData {
  name: string;
  manufacture: string;
  type: string;
}

@Injectable({
  providedIn: 'root'
})
export class ModifyService {

  constructor(
    public http: HttpClient
  ) { }


postInputItems(data: ItemsData){
  return this.http.post('/modify/insertItems', data)
}

}

И если вам это нужно, то это база данных.py:

def insert_dbItems(a, b, c):
        with engine.connect() as con:
                ins = Items.insert().values(name = a, manufacture = b, type = c)
                con.execute(ins)
        return "Successfully inserted data into Items table"

и init .py:

@app.route('/api/modify/insertItems', methods=["POST"])
def insert_Itemsdb():
        body = json.loads(request.data)
        a = body['name']
        b = body['manufacture']
        c = body['type']
        return jsonify(database.insert_dbItems(a, b, c))

База данных и файлы инициализации работают, я могу использовать приложение Postman и корректно вставить из него переменные в свою базу данных. Моя проблема в том, что когда я запускаю весь код выше, я получаю следующее:

введите описание изображения здесь

В заключение: здесь все для меня, чтобы взять ввод от пользователя и вставить его в мою базу данных. Любая помощь будет фантастической, спасибо!

Answer 1

Я думаю, что вы забыли инициализировать insertItems в верхней части вашего ModifyPageComponent.

  insertItems: ItemsData = {
    name: null;
    manufacture: null;
    type: null;
  }

Надеюсь, что это поможет!