我的第一个角度应用程序无法按预期工作

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

一个很好的开始是使用cli初始化您的项目。

  

Angular CLI使创建已经存在的应用程序变得容易   可以直接使用。它已经遵循了我们的最佳实践！

第一 npm install -g @angular/cli

然后 ng new my-dream-app

然后 cd my-dream-app

最后 ng serve

Answer 2

您可以检查的事物：

• 调试从浏览器的控制台标签开始。检查是否有错误。如果是，则单击该错误。 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项目。

注意：只是为了在开始时进行验证，您可以禁用测试用例。