Question

即使删除了html中的大部分内容，错误也不会消失。我正在使用Angular 4创建表单。我无法弄清错误或产生错误的问题。

所需文件附在下面。

HTML文件：

<b>{{todaydate | date:'shortTime'}}</b>
<p id="dir">{{owner| json}}</p>
  <h1>
    Angular 4 {{title| uppercase}}!
  </h1>



    <form [formGroup]="formdata" (ngSubmit)="onClick(formdata.value)">
        <input type="text" name="name" placemame="Name" formControlName="name"><br>
        <input type="text" name="email" placeholder="Email" formControlName="emailid"><br>
        <input type="password" name="password" placeholder ="Passkey" formControlName="password"><br>
        <input type="submit" value="Login">
      </form>
      <br>

      <p>
        Email:{{formadata.emailid}}
        Name:{{formdata.name}}
      </p>

<br/>

<br/>
<br/>
  <p>{{ms.sp}}</p>
    <ul>
      <li><a routerLink="list">list</a></li>
      <li><a routerLink="list2">list2</a></li>
    </ul>

<br/>
<router-outlet></router-outlet>
<button (click)="myClick()">Get Data</button>
<table>
<tr>
  <!--td>ID</td-->
  <td>Name</td>
  <!--td>Username</td-->
  <td>Email</td>
  <!--td>Phone</td>
  <td>City</td-->
</tr>
<tr *ngFor="let i of httpdata">
  <!--td>{{i.id}}</td-->
  <td>{{i.name}}</td>
  <!--td>{{i.username}}</td-->
  <td>{{i.email}}</td>
  <!--td>{{i.phone}}</td>
  <td>{{i.address.city}}</td-->
  </tr> 
  <!--tr *ngFor="let i of formdata">
    <td>{{i.name}}</td>
    <td>{{i.emailid}}</td>
  </tr--> 
</table>`

app.component.ts：这是组件文件。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {


  id:string;
  name:string;
  username:string;
  title = 'testang';
  todaydate= new Date();
  cs;
  httpdata;
  formdata;
  emailid;
  password;

  owner={name:'Corvus', age:'22', address:'I change VPN'};
  months = ["January", "Feburary", "March", "April", "May", 
  "June", "July", "August", "September",
  "October", "November", "December"];

  constructor(private http: HttpClient,private ms:MyserviceService){}
  myClick()
  { 
    this.ms.sp="This is cool!";
    this.http.get('http://jsonplaceholder.typicode.com/users').
    subscribe((data)=> this.displaydata(data));         
  }
  displaydata(data)
  {
    this.httpdata=data;
  }  

  ngOnInit(){
      this.formdata=new FormGroup({
          name: new FormControl("Johnny"),
          emailid: new FormControl("",Validators.required),
          password: new FormControl("",Validators.required)
      });
  }
  onClick(data)
    {
      this.formdata=data.emailid;
      this.formdata=data.name;    }
}

控制台：在Chrome浏览器中，</form>中显示语法错误，但是即使在html中删除了整个表单部分之后，我仍然遇到相同的错误。

compiler.js:2547 Uncaught Error: Template parse errors:
Unexpected closing tag "form". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
  list works

  [ERROR ->]</form>
</p>
</div>
"): ng:///AppModule/ListComponent.html@3:2
    at syntaxError (compiler.js:2547)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:14102)
    at compiler.js:14094
    at Object.then (compiler.js:2538)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:14094)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:14080)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:17282)
    at compiler.js:24906
    at Array.forEach (<anonymous>)
    at compiler.js:24905

Answer 1

我只是在stackblitz上尝试过，一切似乎都很好（至少在HTML部分）。这是我的链接： https://stackblitz.com/edit/angular-puca4m

尝试重新运行该应用程序（关闭编译器，然后再次打开并运行“ ng serve”）。

Answer 2

我认为您必须重新阅读角度教程。在响应式表单上处理更多示例。

func getStepsBetweenDates(_ date1: Date, date2: Date) -> Int{

    let group = DispatchGroup()
    group.enter()

    var steps = 0

    self.pedometer.queryPedometerData(from: date1, to: date2, withHandler: {
      pData, error in
      if let e = error{
          print("Error querying pedometer", e.localizedDescription)
      }else{
        if let data = pData{
          steps = Int(data.numberOfSteps)
        }
        group.leave()
      }
    })

    _ = group.wait(timeout: DispatchTime.distantFuture)
    return steps

  }

ButtonOverviewExample.ts

<div>
    <form [formGroup]="formdata" (ngSubmit)="onClick(formdata.value)">
        <input type="text" name="name" placemame="Name" formControlName="name"/>
        <br/>
        <input type="text" name="email" placeholder="Email" formControlName="emailid"/>
        <br/>
        <input type="password" name="password" placeholder ="Passkey" formControlName="password"/>
        <br/>
        <input type="submit" value="Login">
    </form>
    <br>

    <p>
        Email:{{formdata.get('emailid').value}}
        Name:{{formdata.get('name').value}}
    </p>

    <br/>

    <br/>
    <br/>
    <ul>
        <li>
            <a routerLink="list">list</a>
        </li>
        <li>
            <a routerLink="list2">list2</a>
        </li>
    </ul>

    <br/>
</div>

在创建表单时，我不断遇到错误Angular 4分析错误

2 个答案: