Посмотреть отправленные данные в {{userModel | json}} Но не могу получить данные

Question

Я хочу увидеть отправленные данные в {{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)

    }

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

userModel , определенный в вашем app.component.ts, не доступен напрямую для других компонентов. Чтобы это произошло, вы можете использовать такие методы, как - компонент-взаимодействие .

Вы можете добавить ниже в ваш app.component.html

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

и в файл contact.component.ts добавьте @Input() userModel: User;