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

Posted 2023-03-13

【中文标题】在 userModel | 查看提交的数据json 但无法获取数据

【英文标题】：See submitted data in userModel | json But unable to get data在 userModel | 查看提交的数据json 但无法获取数据

【发布时间】：2019-06-03 00:06:44

【问题描述】：

我想在 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','[e-mail]',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>

【问题讨论】：

据我阅读，我没有看到您正在做任何事情来将数据发送到服务器。例如：提交表单时会发生什么？

我想将数据显示为 JSON userModel | json

【参考方案1】：

在您的 app.component.ts 中定义的

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

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

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

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