使用e.preventDefault()后出现错误无法读取属性街

Question

我是新手 Angular 开发人员，我有以下规范要求 angular cli - Angular CLI：7.0.7 节点：10.13.0 OS : win32 x64 Angular: 7.0.4 但是出现这个错误:

Error in form validation in onSubmit

我使用 e.preventDefault() 但出现错误

Can not read property street

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
}

点击"Add User"按钮后出现如下错误：

*UsersComponent.html:25 ERROR TypeError: Cannot read property 'street' of undefined

at Object.eval [as updateRenderer] (UsersComponent.html:26)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:20375)
at checkAndUpdateView (core.js:19750)
at callViewAction (core.js:19986)
at execEmbeddedViewsAction (core.js:19949)
at checkAndUpdateView (core.js:19746)
at callViewAction (core.js:19986)
at execEmbeddedViewsAction (core.js:19949)
at checkAndUpdateView (core.js:19746)
at callViewAction (core.js:19986) View_UsersComponent_3 @ UsersComponent.html:25

UsersComponent.html:25 ERROR CONTEXT
DebugContext_ View_UsersComponent_3 @ UsersComponent.html:25
users.component.ts:71 123 UsersComponent.html:25 ERROR TypeError:
Cannot read property 'street' of undefined

at Object.eval [as updateRenderer] (UsersComponent.html:26)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:20375)
at checkAndUpdateView (core.js:19750)
at callViewAction (core.js:19986)
at execEmbeddedViewsAction (core.js:19949)
at checkAndUpdateView (core.js:19746)
at callViewAction (core.js:19986)
at execEmbeddedViewsAction (core.js:19949)
at checkAndUpdateView (core.js:19746)
at callViewAction (core.js:19986) View_UsersComponent_3 @ UsersComponent.html:25 UsersComponent.html:25 ERROR CONTEXT DebugContext_*

Answer 1

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

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()后出现错误无法读取属性街

Error occurs after use e.preventDefault() can not read property street

angular

preventdefault