Question

我是较新的Angular开发人员，我有以下要求angular cli的规范-Angular CLI：7.0.7节点：10.13.0 OS：win32 x64 Angular：7.0.4，但是会发生此错误：

onSubmit中的表单验证错误

我使用e.preventDefault()但发生错误

无法读取物业街道

users.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../models/User'; 

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: User[];
  showExtended: boolean = true;
  loaded: boolean = false;
  enableAdd: boolean = true;
  showUSerForm: boolean = false;

  constructor() { }

  ngOnInit() {

      this.users = [
        {
          firstName: 'John',
          lastName: 'Doe',
          age: 70,
          address: {
            street: ' Main st',
            city: 'Boston',
            state: 'MA'
          },
          isActive: true,
          registered: new Date('01/02/2018 08:30:00'),
          hide: true
       },
        {
          firstName: 'Kevin',
          lastName: 'Johnson',
          age: 34,
          address: {
            street: ' School st',
            city: 'Lynn',
            state: 'MA'
          },
          isActive: false,
          registered: new Date('03/11/2017 06:20:00'),
          hide: true
        },
        {
          firstName: 'Karen',
          lastName: 'Williams',
          age: 26,
          address: {
            street: ' Mill st',
            city: 'Miami',
            state: 'FL'
          },
          isActive: true,
          registered: new Date('11/02/2016 10:30:00'),
          hide: true
        }
      ];

      this.loaded = true;
  }

  addUser(user: User) {
    this.users.push(user);
  }

  onSubmit(e){
    console.log(123);

    e.preventDefault();
  }

}

在最后一行e.preventDefault()上发生错误。

user.component.html

<button (click)="showUSerForm = !showUSerForm" class="btn btn-dark mb-3">Add User</button>
<div class="card card-body" *ngIf="showUSerForm">
  <h2>Add User</h2>
  <form (submit)="onSubmit($event)">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" class="form-control" name="firstName">
    </div>
    <button (click)="addUser({firstName: 'John', lastName: 'Danial', isActive: true})" [disabled]="!enableAdd"
      class="btn btn-block mb-3">
      Add New User</button>
  </form>
</div>

<ul class="list-unstyled" *ngIf="loaded && users?.length > 0">
  <li class="card card-body mb-2" *ngFor="let user of users" [class.bg-light]="user.isActive">
    <h3>{{ user.firstName }} {{ user.lastName }}
      <small *ngIf="user.age && user.address">
        <button (click)="user.hide = !user.hide" class="btn btn-dark btn-sm">
          <i [ngClass]="user.hide ? 'fa fa-plus' : 'fa fa-minus'"></i>
        </button>
      </small>
    </h3>
    <ul class="list-group">
      <li class="list-group-item">Age: {{ user.age }}</li>
      <li class="list-group-item">Address: {{ user.address.street }} {{ user.address.city }}, {{ user.address.state }}
      </li>
      <li class="list-group-item">Joined: {{ user.registered | date }}</li>
    </ul>
  </li>
</ul>

<h4 *ngIf="users?.length == 0">No Users Found</h4>

<h4 *ngIf="!loaded">Loading Users...</h4>

User.ts：

export interface User {
  firstName: string,
  lastName: string,
  age?: number,
  address?: {
    street?: string,
    city?: string,
    state?: string
  },
  isActive?: boolean,
  registered?: any,
  hide?: boolean
}

单击“添加用户”按钮后发生以下错误：

* UsersComponent.html：25错误TypeError：无法读取未定义的属性“ street”

at Object.eval [作为updateRenderer]（UsersComponent.html：26）
  在Object.debugUpdateRenderer [作为updateRenderer]（core.js：20375）
  在checkAndUpdateView（core.js：19750）
  在callViewAction（core.js：19986）
  在execEmbeddedViewsAction（core.js：19949）
  在checkAndUpdateView（core.js：19746）
  在callViewAction（core.js：19986）
  在execEmbeddedViewsAction（core.js：19949）
  在checkAndUpdateView（core.js：19746）
  在callViewAction（core.js：19986）View_UsersComponent_3 @ UsersComponent.html：25

UsersComponent.html：25错误上下文
  DebugContext_ View_UsersComponent_3 @ UsersComponent.html：25
  users.component.ts：71 123 UsersComponent.html：25错误TypeError：
  无法读取未定义的属性“街道”

at Object.eval [作为updateRenderer]（UsersComponent.html：26）
  在Object.debugUpdateRenderer [作为updateRenderer]（core.js：20375）
  在checkAndUpdateView（core.js：19750）
  在callViewAction（core.js：19986）
  在execEmbeddedViewsAction（core.js：19949）
  在checkAndUpdateView（core.js：19746）
  在callViewAction（core.js：19986）
  在execEmbeddedViewsAction（core.js：19949）
  在checkAndUpdateView（core.js：19746）
  在callViewAction（core.js：19986）上View_UsersComponent_3 @ UsersComponent.html：25 UsersComponent.html：25错误上下文   DebugContext _ *

Answer 1

使用Add New User单击addUser({firstName: 'John', lastName: 'Danial', isActive: true})按钮时，您添加的用户没有地址。

user.address未定义，但是您试图在视图中调用user.address.street。

您可以尝试类似的事情。

<li class="list-group-item">
  Address: {{ user.address ? user.address.street + ' ' + user.address.city + ',' + user.address.state ? '' }}
</li>

或

<li class="list-group-item">
  Address: <ng-container *ngIf="user.address"> {{ user.address.street }} {{ user.address.city }}, {{ user.address.state }}</ng-container>
</li>

使用e.preventDefault（）无法读取属性street

1 个答案: