Angular 中的 ngModel 错误问题。输入属性绑定问题

Question

我正在尝试使用 ngModel 绑定属性，但它一次又一次地给出错误。我在组件中定义了 convert 方法，它需要一个 parameter。我无法理解为什么会出现问题。 html 文件代码

<input type="text" [(ngModel)]="my_message" />
<button (onclick)="convert({'message':my_message})">Submit</button>

组件class代码

import { Component, OnInit } from '@angular/core';
import { UppercaseConvertorService } from '../../services/uppercase-convertor.service';
import { HttpErrorResponse } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-uppercase-convertor',
  templateUrl: './uppercase-convertor.component.html',
  styleUrls: ['./uppercase-convertor.component.css']
})
export class UppercaseConvertorComponent implements OnInit {
  public result: any;
  constructor(private _service: UppercaseConvertorService) { }

  ngOnInit() {
  }
  public convert(obj): any {
    this._service.convertToUpperCase(obj).subscribe(
      res => this.result = res,
      (err: HttpErrorResponse) => {
        console.error(err);

      }
    )
  }
}

错误：

Answer 1

您必须在组件中定义 my_message，如下所示。该错误表明它未在组件中定义。 ngModel 实际上将您的组件数据变量绑定到您的 html 输入 UI 控件

public result: any;
public my_message;

然后转换成这样

public convert(): any {
  const obj = {'message': this.my_message}
    this._service.convertToUpperCase(obj).subscribe(

并在 html 文件中将其更改为

<button (onclick)="convert()">Submit</button>

Angular 中的 ngModel 错误问题。输入属性绑定问题

ngModel error issue in Angular. input property binding issue

angular-directive

angular

Angular 中的 ngModel 错误问题。输入 属性 绑定问题

ngModel error issue in Angular. input property binding issue

angular-directive

angular

Angular 中的 ngModel 错误问题。输入属性绑定问题