Question

我在html中定义了以下格式：

2^n

，然后在我的ts文件中添加以下内容：

<div class="col-12 mt-2">
  <form (ngSubmit)="addswingtype()" #addswingtypeform="ngForm">
    <div class="row">
      <div class="col-10 mt-2">
         <input type="text"
                id="addswingtype"
                name="addswing"
                ngModel
                placeholder="Enter A Swing Type"
                class="form-control">

       </div>
       <div class="col-2 mt-2">
         <button type="submit" class="btn btn-outline-dark">Submit</button>
       </div>
    </div>
  </form>
</div>

看起来像正确的代码，对不对？好吧，因为它似乎是正确的代码。实际上，它与我编写的另一个有效的组件相同。

但是无论出于何种原因，import {Component, OnInit, ViewChild} from '@angular/core'; import {NgForm} from '@angular/forms'; @ViewChild('addswingtypeform') addswingtypeform:NgForm; @Component({ selector: 'app-swingerandhosttypes', templateUrl: './swingerandhosttypes.component.html', styleUrls: ['./swingerandhosttypes.component.css'], providers: [Httpservice] }) export class SwingerandhosttypesComponent implements OnInit { constructor(private http: Httpservice) { } addswingtype(){ console.log(this.addswingtypeform); const url = swingtypeallorcreate; const payload = { name: this.addswingtypeform.form.value.addswing }; this.http.post(url, payload) .subscribe( (req: any)=>{ this.swingtypes.push(req); } ); }的{{1}}值始终未定义

我不知道为什么。

有什么线索可能会出问题吗？

Answer 1

请将代码更改为以下内容，您将看到结果。

请按照以下代码块替换您的HTML代码。

<div class="col-12 mt-2">
<form (ngSubmit)="addswingtype()" #addswingtypeform="ngForm">
    <div class="row">
        <div class="col-10 mt-2">
            <input type="text"
            id="addswingtype"
            name="addswing"
            ngModel
            placeholder="Enter A Swing Type"
            class="form-control">

   </div>
   <div class="col-2 mt-2">
     <button type="submit" class="btn btn-outline-dark">Submit</button>
   </div>
</div>

并按照以下代码块替换您的TS代码。

import {Component, OnInit, ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms';


@Component({
selector: 'app-swingerandhosttypes',
  templateUrl: './swingerandhosttypes.component.html',
  styleUrls: ['./swingerandhosttypes.component.css'],
  providers: [Httpservice]
})
export class SwingerandhosttypesComponent implements OnInit {
  @ViewChild('addswingtypeform') addswingtypeform:NgForm;
  constructor(private http: Httpservice) { }

  addswingtype(){
     console.log(this.addswingtypeform);
     const url = swingtypeallorcreate;
     const payload = {
        name: this.addswingtypeform.form.value.addswing
     };
     this.http.post(url, payload)
      .subscribe(
        (req: any)=>{
          this.swingtypes.push(req);
     });
  }

正确设置了角度形式，但未传递形式值

1 个答案: