Question

我一直在尝试为现有的项目创建具有Angular前端的DRF API。我已经为用户和设备创建了一个序列化器。我尝试删除多个HTML组件，设法导致另一个错误，StaticInjectorError（AppModule-> DevicePostService）。

我对Angular还是很陌生，所以错误似乎源于我的devicepostservice由于某种原因未送达网页的事实。

控制台错误：

[Error] Error: Template parse errors:
Unexpected character "<" ("
  <div class="col-sm-4">
    <button (click)="login()" class="btn btn-primary">Log In</button
  [ERROR ->]</div>
  <div class="col-sm-12">
    <span *ngFor="let error of _userService.errors.non_field_errors""): ng:///AppModule/AppComponent.html@15:2
Unexpected closing tag "div". 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 ("
  <div class="col-sm-4">
    <button (click)="login()" class="btn btn-primary">Log In</button
  [ERROR ->]</div>
  <div class="col-sm-12">
    <span *ngFor="let error of _userService.errors.non_field_errors""): ng:///AppModule/AppComponent.html@15:2
Unexpected closing tag "div". 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 (" <span *ngFor="let error of _userService.errors.non_field_errors">{{ error }}<br /></span>
  </div>
[ERROR ->]</div>
<div class="row" *ngIf="_userService.token">
  <div class="col-sm-12">You are logged in as {{ "): ng:///AppModule/AppComponent.html@19:0
    _preparseLoadedTemplate (vendor.js:24658)
    normalizeTemplate (vendor.js:24635)
    loadDirectiveMetadata (vendor.js:26827)
    (anonymous function) (vendor.js:34471)
    forEach
    (anonymous function) (vendor.js:34470)
    forEach
    _loadModules (vendor.js:34467:83)
    _compileModuleAndComponents (vendor.js:34445)
    compileModuleAsync (vendor.js:34405)
    bootstrapModule (vendor.js:53721)
    ./src/main.ts (main.js:326:116)
    __webpack_require__ (runtime.js:79)
    (anonymous function) (main.js:339)
    __webpack_require__ (runtime.js:79)
    checkDeferredModules (runtime.js:46)
    webpackJsonpCallback (runtime.js:33)
    Global Code (main.js:1)

App.component.html

<h2>Log In</h2>
<div class="row" *ngIf="!_userService.token">
  <div class="col-sm-4">
    <label>Username:</label><br />
    <input type="text" name="login-username" [(ngModel)]="user.username">
    <span *ngFor="let error of _userService.errors.username"><br />
    {{ error }}</span></div>
  <div class="col-sm-4">
    <label>Password:</label><br />
    <input type="password" name="login-password" [(ngModel)]="user.password">
    <span *ngFor="let error of _userService.errors.password"><br />
    {{ error }}</span>
  </div>

  <div class="col-sm-12">
    <span *ngFor="let error of _userService.errors.non_field_errors">{{ error }}<br /></span>
  </div>
</div>
<div class="row" *ngIf="_userService.token">
  <div class="col-sm-12">You are logged in as {{ _userService.username }}.<br />
    Token Expires: {{ _userService.token_expires }}<br />
    <button (click)="refreshToken()" class="btn btn-primary">Refresh Token</button>
    <button (click)="logout()" class="btn btn-primary">Log Out</button>
  </div>
</div>
<!--      
<h2 class="mt-3">Devices</h2>
<div *ngFor="let device of devices">
      <div class="row mb-3">
          <label class="col-md-2">Owner:</label>
          <div class="col-md-2 mb-1">{{ device.owner }}</div>
          <label class="col-md-2">Brand:</label>
          <div class="col-md-6">{{ device.brand }}</div>
          <div class="col-md-12">{{ device.name }}</div>
      </div>
</div>-->

App.component.ts

import {Component, OnInit} from '@angular/core';
import {DevicePostService} from './device_post.service';
import {UserService} from './user.service';
import {throwError} from 'rxjs';

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

  /**
   * An object representing the user for the login form
   */
  public user: any;
  public devices;
  public new_device: any;

  constructor(private _devicePostService: DevicePostService, private _userService: UserService) { }

  ngOnInit() {
    this.getDevices();
    this.new_device = {};
    this.user = {
      username: '',
      password: ''
    };
  }

  getDevices() {
      this._devicePostService.list().subscribe(
          data => {
              this.devices = data;
          },
          err => console.error(err),
          () => console.log('done loading devices')
      )
  }

  updateDevice () {
      this._devicePostService.create(this.new_device, this.user.token).subscribe(
      data => {
          this.getDevices();
          return true;
      },
          error => {
              console.error('Error saving!');
              return throwError(error);
          }
      );
  }

  login() {
    this._userService.login({'username': this.user.username, 'password': this.user.password});
  }

  refreshToken() {
    this._userService.refreshToken();
  }

  logout() {
    this._userService.logout();
  }

}

Answer 1

似乎您的模板中存在基本语法错误

<button (click)="login()" class="btn btn-primary">Log In</button

应该是

<button (click)="login()" class="btn btn-primary">Log In</button>

（请注意最后一个'>'字符）

带有Django REST框架的模板解析Erros角“ <”（“”

1 个答案: