AppComponent.html:7 ERROR DOMExc

1. 错误描述

2. 错误原因

由于Angular在绑定元素属性时，不能出现单个括号，即是语法错误导致的。

app.component.ts

import { Component } from '@angular/core';
import { Student } from '../student/student';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  template: `
    <h1>{{title}}</h1>
    <img [src]="imgUrl"]>
    <h2>名称：{{one.name}},年龄：{{one.sage}}</h2>
    <p *ngIf="student.length > 4">超过四个</p>
    <ol>
    <li *ngFor="let stu of student">
      {{ stu.name }}
    </li>
  </ol>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'amk';
  imgUrl = '';
  student = [
    new Student(1, 'zs', 20),
    new Student(2, 'ls', 21),
    new Student(3, 'su', 21),
    new Student(4, 'zhu', 21),
    new Student(5, 'lei', 21)
  ];

  one = this.student[0];
}


student.ts

export class Student {
  sno: number;
  name: string;
  sage: number;

  constructor(sno: number, name: string, sage: number) {
    this.sno = sno;
    this.name = name;
    this.sage = sage;
  }
}

3. 解决办法

去掉多余的符号

import { Component } from '@angular/core';
import { Student } from '../student/student';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  template: `
    <h1>{{title}}</h1>
    <img [src]="imgUrl">
    <h2>名称：{{one.name}},年龄：{{one.sage}}</h2>
    <p *ngIf="student.length > 4">超过四个</p>
    <ol>
    <li *ngFor="let stu of student">
      {{ stu.name }}
    </li>
  </ol>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'amk';
  imgUrl = '';
  student = [
    new Student(1, 'zs', 20),
    new Student(2, 'ls', 21),
    new Student(3, 'su', 21),
    new Student(4, 'zhu', 21),
    new Student(5, 'lei', 21)
  ];

  one = this.student[0];
}