Question

邮寄回传会返回错误消息列表，这些错误消息我已通过服务发送到员工列表组件。在那里，它将ngIf =“ errorlist”放在组件'error-message'上。它还在同一组件上发送[errorlist] =“ errorlist”。

然后，错误列表组件将显示错误。由于某些原因，这不起作用。在我的员工列表组件的控制台日志中，我可以看到我得到了错误列表，它的长度例如为3，因此应该可以正常工作！

员工列表组件

@Component({
selector: 'employee-list component',
template: `
<div class="form-group">
<input class="new-style" type="text" [(ngModel)]="listFilter" placeholder="Filter employees..">
    <p class="new style">         
Showing{{filteredEmployees.length}} of{{totalCount}} employees.
   </p>
<ng-container *ngIf="errorList?.length">
    <error-message [errorList]="errorList"></error-message>
</ng-container>
<p *ngIf="errorList.length > 0">hello</p>
</div>
 `
})

export class employeeListComponent implements OnInit {
errorList: ErrorMessage[] = [];

ngOnInit(): void {
       .........
    this.validationService.errorEmitter.subscribe(
        (errorData: ErrorMessage[]) => {
            this.displayErrors(errorData);
        });
}

    displayErrors(data: ErrorMessage[]) {
    if (data.length) {
        this.errorList = data;
        console.log('errorList ', this.errorList);
        console.log('errorList length ', this.errorList.length);
    }
}
}

错误消息组件

@Component({
selector: 'error-message',
template: `
<ng-container *ngIf="errorList">
 <ng-container *ngFor="let error of errorList">
    <div class="validation-summary error no-shadow">
        <ul>
            <li>{{ error.SourceReference }}, {{ error.ErrorMsg }}</li>
        </ul>
    </div>
 </ng-container>
</ng-container>
`
})
export class ErrorMessageComponent {
@Input()
errorList: ErrorMessage[] = [];


ErrorMsg: string;
SourceReference: string;
Properties: string[];

ngOnInit(): void {
    console.log('errorComp ', this.errorList);
  }
}

Answer 1

我将错误组件，validationservice和html从employeelistcomponent移到了employeelistcomponent（employeeComponent）的父级上，现在它可以工作了。也许employeelist和errormessage是兄弟姐妹？。

Ngif条件数组和输出到子组件不起作用

1 个答案: