时间戳

首页 > 解决方案 > 在 {{ userModel | 查看提交的数据 json}} 但无法获取数据

angular - 在 {{ userModel | 查看提交的数据 json}} 但无法获取数据

问题描述

我想在 {{ userModel | 中查看提交的数据 json}} 但无法获取数据。

我正在使用角度 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)

    }

联系人.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>

标签： angularangular2-formsangular7angular-forms

解决方案

在你的app.component.ts中定义的 userModel 不能被其他组件直接访问。为了实现它，您可以使用诸如-component-interaction 之类的技术。

您可以在 app.component.html 中添加以下内容

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

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

推荐阅读