Angular 5 Material 自动完成的初始值为空

Question

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

自动完成的数据来自 parent 组件。 parent 组件有：

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

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

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

服务returnsObservable<DrawingRevisionIDsOnly[]>.

child是这样设置的：

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，并将默认 null 值设置为 [] 在集合中。

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

Angular 5 Material 自动完成的初始值为空

Angular 5 Material autocomplete has null initial value

autocomplete

rxjs

rxjs5

angular-material2

angular