Мое первое угловое приложение не работает должным образом

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 doc расскажет вам, какие ошибки вы допустили.

• Проверьте, импортировали ли вы 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, а не с угловым проектом.

Примечание: просто для проверки при запуске вы можете отключить контрольные примеры.

Answer 2

Очень хорошее начало - использование cli для инициализации вашего проекта.

Angular CLI позволяет легко создать приложение, которое уже работает, прямо из коробки,Это уже следует нашим лучшим практикам!

Сначала npm install -g @angular/cli

Затем ng new my-dream-app

Затем cd my-dream-app

Наконец ng serve