Question

我使用8号角弹簧靴子，我创建了一个应用程序手势，当我想通过字体最终形式输入详细信息时它接受值并在我的数据库中显示null。当我输入数据时通过邮递员，它运作完美。但在前端它告诉我错误这种类型的。

:ERROR TypeError: Cannot read property 'name' of undefined.

adduser.component.html

<h1>Add User</h1>
<form #recievedUser="ngForm">

  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" placeholder="user name" [(ngModel)]="user.name" name="name">

  <label for="type">Type</label>
  <input type="text" class="form-control" id="type" placeholder="type name" [(ngModel)]="user.type" name="name">

  <label for="password">Password</label>
  <input type="password" class="form-control" id="password" placeholder="password" [(ngModel)]="user.password" name="password">

   <br>
  <button type="button" class="btn btn-success" (click)="addUser()">Save</button>
</form>

adduser.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { User } from 'src/app/User';
import { HttpClientService } from '../../../service/http-client.service';
import { Router } from '@angular/router';


@Component({
  selector: 'app-adduser',
  templateUrl: './adduser.component.html',
  styleUrls: ['./adduser.component.css']
})
export class AdduserComponent implements OnInit {

  @Input()
  user: User

  @Output()
  userAddedEvent = new EventEmitter();

  newUser: User;
  message: string;
  password: string;

  constructor(private httpClientService: HttpClientService,
    private router: Router) { }

  ngOnInit() {
    this.newUser = Object.assign({}, this.user);

  }

  addUser() {
    this.httpClientService.addUser(this.newUser).subscribe(
      (user) => {
        this.userAddedEvent.emit();
        this.router.navigate(['admin', 'users']);
      }
    );
  }
}

user.componebt.html

<h1>Users Admin</h1>
<a class="btn btn-primary mb-3" (click)="addUser()">add</a>
<div class="container row">
    <div   class="col-md-6">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users" >
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td><button type="button" class="btn btn-primary">Show Details</button></td>
      </tr>
      </tbody>
    </table>
  </div>
  <div   class="col-md-6">
    <app-adduser *ngIf="action === 'add'" [user]="selectedUser" (userAddedEvent)="refreshData()"></app-adduser>
  </div>
</div>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClientService } from 'src/app/service/http-client.service';
import { User } from 'src/app/User';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users:Array<User>;
  selectedUser : User;
  action : String;

  constructor(private httpClientService : HttpClientService,
    private activeRoute : ActivatedRoute,
    private router :Router) { }

  ngOnInit() {
    this.refreshData();
  }
  refreshData(){
    this.httpClientService.getUsers().subscribe(
      response => this.handleSuccessfullResponse(response),
    );
    this.activeRoute.queryParams.subscribe(
      (params) =>{
         this.action=params['action']
      }
    );
  }
  handleSuccessfullResponse(response){
   this.users=response;
  }
  addUser(){
    this.selectedUser=new User();
    this.router.navigate(['admin','users'],{queryParams:{action:'add'}});
  }

}

User.ts

export class User {
    id: number;
    name: string;
    type: string;  
    password: string;
  }

Answer 1

问题出在 user.component.ts

addUser(){
    this.selectedUser=new User(); //<- here
    this.router.navigate(['admin','users'],{queryParams:{action:'add'}});
  }

您要将this.selectedUser传递给其子组件，然后尝试访问form中的值。要么将值初始化为对象

addUser(){
    this.selectedUser= {
      id: 0,
      name: "",
      type: "",
      password: ""
    }
    this.router.navigate(['admin','users'],{queryParams:{action:'add'}});
  }

或在类中进行更改以初始化值：

export class User {
    id: number;
    name: string;
    type: string;  
    password: string;
    constructor(){
       this.id = 0;
       this.name = "";
       this.type = "";
       this.password = "";
    }
  }

类型错误无法读取角度8中未定义的属性

1 个答案: