Question

我想在{{userModel | json}} 但是无法获取数据。

我正在使用Angular 7.0

下面是我的代码。请检查并告诉我我哪里出问题了。

非常感谢您的帮助

User.ts（模型）

export class User {
    constructor(
        public name: string,
        public email: string,
        public phone: number,
        public examselect: string,
        public perfencetocall: string,
        public 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 {


      title = 'demo';
      userModel = new User ('vipin','rob@test.com',132456700555555,'morning','sdf',true)

    }

contact.component.html

 <div class="container">
        <h2 class=""> Contact form</h2>
        <br>
        <form #userForm="ngForm">
     {{ userForm.value | json}}
     <hr>
     {{ userModel | json}}
          <div class="form-group">
            <label class="control-label col-sm-1" for="name">Name:</label>
            <div class="col-sm-11">
              <input type="text" class="form-control" id="name" placeholder="Enter email" name="name" [(ngModel)]="userModel.name">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-1" for="email">Email:</label>
            <div class="col-sm-11">          
              <input type="text" class="form-control" id="email" placeholder="Enter password" name="email" [(ngModel)]="userModel.email">
            </div>
          </div>
  <div class="form-group">        
            <div class="col-sm-offset-1 col-sm-11">
              <button type="submit" class="btn btn-success">Submit</button>&nbsp;
                  <button type="submit" class="btn btn-danger">Reset</button>
            </div>
          </div>
        </form>
      </div>

Answer 1

您的app.component.ts中定义的

userModel 不能被其他组件直接访问。为此，您可以使用-component-interaction之类的技术。

您可以在app.component.html

中添加以下内容

<app-contact [userModel]="userModel"></app-contact>

并在contact.component.ts文件中添加@Input() userModel: User;

查看{{userModel | json}}但无法获取数据

1 个答案: