html - 我的第一个 Angular 应用程序没有按预期工作

Question

我开始尝试使用 Angular，下载了所有相关的东西，但是我得到了以下输出(我应该看到一些名称而不是 {{ name }} ):



这是app.component.html :

<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>

这是app.component.ts :

  import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.styl']
    })
    export class AppComponent {
      name = 'ddd';
    }

这是app.component.spec.ts :

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'my-first-app'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('my-first-app');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-first-app!');
  });
});

Answer 1

您可以检查以下几件事:

从浏览器的 开始调试控制台 标签。检查您是否有错误。如果是，则单击该错误。 Angular 文档会指导你犯了什么错误。

检查您是否已导入 FormsModule在你app.module.ts文件。

或者，您也可以验证您是否已经成功启动了这样的初始项目(这也将确认您是否有错误 FormsModule):

在 app.component.html文件

 <input (keyup)="onKey($event)">
 <p>{{values}}</p>

在 app.component.ts文件

values = '';
onKey(event: any) { // without type info
   this.values += event.target.value + ' | ';
}

写一些东西并检查这是否有效。如果是，那么您的错误是 FormsModule而不是 Angular 项目。

注意:只是为了在启动时验证您可以禁用测试用例。