Javascript Angular 2无法读取属性'；x'；空的

我正在学习承诺，我正在试图得到一个简单的例子来工作，但我得到了错误。Promissions角色只是检查是否输入了某个名称，并在回调时生成布尔错误

无法读取null的属性“shouldbeeunique”

这是我的组件

import {Component, Inject} from '@angular/core';
import {FormGroup, Validators, FormBuilder} from '@angular/forms';
import {UsernameValidators} from './usernameValidators'

@Component({
    selector: 'signup-form',
    templateUrl: 'app/signup-form.component.html'
})
export class SignUpFormComponent {

    form: FormGroup;

    constructor(@Inject(FormBuilder) fb: FormBuilder) {
        this.form = fb.group({
            username: ['', Validators.compose([
                Validators.required,
                UsernameValidators.cannotContainSpace
            ]), UsernameValidators.shouldBeUnique],
            password: ['', Validators.required]
        })
    }

    get username(): any {return this.form.get('username');}
    get password(): any {return this.form.get('password');}

}

这是我的component.html

<form [formGroup]="form" (ngSubmit)="signup()">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
                id="username"
                type="text"
                class="form-control"
                formControlName="username" placeholder="Username"
                >
        <div *ngIf="username.touched && username.errors">
            <div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">This username is already taken</div>
        </div>
</form>

---

谢谢

尝试使用

安全导航操作符（？）

来防止属性路径中出现空值和未定义值

<div *ngIf="username.touched && username.errors">
    <div *ngIf="username.errors?.shouldBeUnique" class="alert alert-danger">This username is already taken</div>
</div>

此用户名已被使用

这将解决您当前遇到的错误。请阅读Angular 2文档中的更多内容：

---

你为什么要学习承诺而不是观察到的东西？在我看来，在ng2中学习承诺是一种浪费时间的行为。通过在线课程，我仍然认为学习承诺是件好事。观察和承诺是不同的概念，我从来没有在我构建的任何ng2应用程序中使用过一个承诺，我不同意。ng2是建立在可观察的基础上的，我发现在可观察的基础上思考比较困难，因为我知道承诺。不要陷入同一个陷阱！这就像jquery与angular，一旦你开始学习angular，你就不能像jquery那样思考，而必须“忘记”jquery以angular的方式进行思考，就像承诺和观察一样。@garethb非常感谢你的见解，我将接受你的建议。我以前曾被这个陷阱困住过。为了学习的目的，我只需触摸一下，然后继续观察。非常感谢！

<div *ngIf="username.touched && username.errors">
    <div *ngIf="username.errors?.shouldBeUnique" class="alert alert-danger">This username is already taken</div>
</div>