@Component({
     selector: 'list-errors',template: `<ul class="error-messages" *ngIf="errorList">
        <li *ngFor="let error of errorList">
            {{ error }}
        </li> </ul>`
    })
export class ListErrorsComponent {
  formattedErrors: Array<string> = [];

      @Input()
      set errors(errorList: Errors) {
        this.formattedErrors = [];

        if (errorList.errors) {
          for (let field in errorList.errors) {
            this.formattedErrors.push(`${field} ${errorList.errors[field]}`);
          }
        }
      };

      get errorList() { return this.formattedErrors; }
      }

在弹出窗口中使用此选项可以显示错误列表

<list-errors [errors]="errors"></list-errors>

创建一个错误模型

export class Errors {
  errors: {[key:string]: string} = {};
  }

设置错误对象的值并将此错误对象传递给list-error组件

errors: Errors = //assign your errors to this variable