Question

我有一个自动填充表单字段，当它是一个简单的自动完成时工作正常。但是，当我尝试添加自定义过滤器时，它会失败。

自动填充的数据来自父组件。父组件具有：

alldwgrevdata: Observable<DrawingRevisionIDsOnly[]>;
...
ngOnInit() {
    this.alldwgrevdata = this.drawingRevisionService.getAllDrawingRevisions();
}

并通过以下方式将数据传递给模板中的子项：

<child [alldwgrevdata]="alldwgrevdata | async"></child>

服务返回Observable<DrawingRevisionIDsOnly[]>。

孩子的设置如下：

export class DrawingSelectorComponent implements OnInit {
    @Input("drawingrevs")
    drawingrevs: DrawingRevision[] = [];

    @Input("alldwgrevdata")
    alldwgrevdata: DrawingRevisionIDsOnly[] = [];

    filteredrevdata: Observable<DrawingRevisionIDsOnly[]>;

    @Input()
    public parentForm: FormGroup;

    @Output()
    onDwgChange = new EventEmitter();

    constructor(private fb: FormBuilder, private drawingRevisionService: DrawingRevisionService, private messagesService: MessagesService) { }

    ngOnInit() {
        console.log(this.alldwgrevdata);
        let dwgSelectControl = new FormControl(this.drawingrevs);
        this.parentForm.addControl('attachedDwgsControl', dwgSelectControl);

        this.filteredrevdata = dwgSelectControl.valueChanges
            .startWith([])
            .map(dwgrev => dwgrev && typeof dwgrev === 'object' ? (dwgrev.drawingID+" "+dwgrev.revisionid) : dwgrev)
            .map(dwgIDrevID => dwgIDrevID ? this.filter(dwgIDrevID) : this.alldwgrevdata.slice());
    }

    filter(dwgIDrevID: string): DrawingRevisionIDsOnly[] {
        return this.alldwgrevdata.filter(option => (option.drawingID+" "+option.revisionid).toLowerCase().indexOf(dwgIDrevID.toLowerCase()) === 0);
    }

    displayFn(dwgRev: DrawingRevisionIDsOnly): string {
        return dwgRev ? (dwgRev.drawingID+" "+dwgRev.revisionid) : "";
    }
}

错误为this.alldwgrevdata is null。在ngOnInit（）方法中，console.log确实输出null，因此错误在某种程度上是有意义的。设置表单控件的valueChanges部分时会出现问题。

我试图改变

this.alldwgrevdata.slice()

到

(this.alldwgrevdata==null ? [] : this.alldwgrevdata.slice())

但这没有效果。

如何将Observable的初始值设置为空数组，或者在评估之前强制valueChanges等待数据服务完成？或者是否有一种完全不同的方式来解决这个问题？谢谢！

Answer 1

在这一行

.map(dwgIDrevID => dwgIDrevID ? this.filter(dwgIDrevID) : this.alldwgrevdata.slice());

可以分支。如果分支到this.filter()（也使用this.alldwgrevdata），您将收到相同的错误消息。

问题是，在这一行

<child [alldwgrevdata]="alldwgrevdata | async"></child>

传入的值最初将为null，此处使用的默认空数组为

@Input("alldwgrevdata")
alldwgrevdata: DrawingRevisionIDsOnly[] = [];

将被该null覆盖。（默认值仅在未传入参数时发生。）

您可以将@Input与set/get语法结合使用，并将默认空值设置为集合内的[]，而不是在很多地方测试null。

private _alldwgrevdata = [];
@Input('alldwgrevdata')
set alldwgrevdata(value: string) {
  this._alldwgrevdata = value || [];
}
get alldwgrevdata() {
  return this._alldwgrevdata;
}

Angular 5 Material自动完成具有null初始值

1 个答案: