无法使用 ngModel 和模型对象填充角度形式

Question

我一直在练习用于Web开发的Angular框架。同时，我使用了一个模型类user.ts：

 export class User {
    constructor(
        username: string,
        email: string,
        phone: number,
        choice: string,
        timePreference: string,
        promotional: boolean
    ){}
}

和app.component.ts：

    import { Component } from '@angular/core';
import { User } from './user';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  topics=['angular','react','veu'];
  user = new User('Gull','[e-mail]',723893, '', 'morning', false);
}

现在我正在使用app.component.html：

<div class="container-fluid">
  <h1>Bootcamp enrollment form</h1>
  <form action="" #tempForm="ngForm">
    {{tempForm.value | json}}
    <!-- {{title}} -->
    <hr/>
    {{user | json}}
    <div class="form-group">
      <Label>Name:</Label>
      <input type="text" #name class="form-control" name="userName" [(ngModel)]="user.username">
    </div>
    {{name.class}}
    <div class="form-group">
      <Label>Email:</Label>
      <input type="email" class="form-control" [(ngModel)]="user.email" name="emailAddress">
    </div>
    <div class="form-group">
      <Label>Phone:</Label>
      <input type="tel" class="form-control" [(ngModel)]="user.phone" name="phone">
    </div>
    <div class="form-group">
      <select name="choice" id="" class="custom-select" [(ngModel)]="user.choice" >
        <option value="">I am selected here</option>
        <option *ngFor="let top of topics">{{top}}</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="">Time preference</label>
      <div class="form-check">
        <input type="radio" class="form-check-input" value="morning" name="timePreference" [(ngModel)]="user.timePreference">
        <label for="timePreference">Morning</label>
      </div>
      <div class="form-check">
        <input type="radio" class="form-check-input" value="evening" name="timePreference" [(ngModel)]="user.timePreference">
        <label for="timePreference">Evening</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" value="offers" name="promotional" [(ngModel)]="user.promotional">
        <label for="promotional">Send me promotional offers</label>
      </div>
    </div>
    <button class="btn btn-primary">Submit</button>
  </form>
</div>

在此代码中，我使用 tempForm 作为 ngForm 将输入的值显示为模板驱动表单，而我{{user | json}}用于打印模型对象值的管道。我已经在 app.component.ts 中填充了模型，但这里没有显示用这些值填充的控件。

第二个问题是，{{name.class}}看到控件使用的类，它们是否仅适用于模型驱动窗体？

我还导入了表单模块，因此这不是错误：

app.module.ts 是：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,    
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

现在您的form正在绑定组件中的user实例，但它的属性对它不可见。

您需要将User类属性定义为public，以便它们 在课堂外可见。

例：

export class User {
    constructor(
        public username: string,
        public email: string,
        public phone: number,
        public choice: string,
        public timePreference: string,
        public promotional: boolean
    ){}
}

下面是一个基于您的代码的工作堆栈闪电战示例： https://stackblitz.com/edit/angular-uqcekz