0

我有一组关键字作为模型的属性。现在我想在输入中将其显示为逗号分隔的字符串，并在用户键入时将其转换回数组。

我创建了一个连接管道来修改输出，但我不知道如何使用 实现类似的结果(ngModelChange)，但方向相反（从逗号分隔的字符串转换为字符串数组）。

<input type="text" [ngModel]="model.keywords | join:', '," (ngModelChange)="model.keywords=$event">

我知道我可以在组件上添加一个方法并在那里执行，但是如果我需要在许多不同的组件上执行此操作怎么办。我想在 Angular 中注册一些函数，以便它可以像管道一样在 html 中使用。

也许这根本不是实现我需要的最佳方式，我需要从其他方向思考？

我可以看到其他 2 个选择：

  1. 像这样为输入创建一个组件就可以了，但是我可能会在其他一些（非输入）组件中需要它，例如

  2. 在模型上添加一个额外的属性并使模型本身负责转换（或者使用一个类作为关键字，而不仅仅是一个字符串数组，它将有一个单独的构造函数或其他东西，不知道如何将它连接到角度模型）。

4

1 回答 1

1

我最终得到了一个简单的解决方案，即向模型添加额外的 get/set 属性：

get keywordsString(): string {
    if (this.keywords) {
        return this.keywords.join(", ");
    }
    else {
        return "";
    }
}

set keywordsString(input: string) {

    if (input !== null) {
        this.keywords = input.split(",")
                             .map(t => t.trim())
                             .filter(t => t !== "");
    }
    else {
        this.keywords = [];
    }
}

对于简单的情况，这比注释中建议的 ControlValueAccessor 容易得多（这是完全有效的，对于这个简单的情况来说有点太重了）。然后我就可以使用[(ngModel)]="model.keywordsString"它了，看起来效果很好。

于 2016-10-25T07:33:08.247 回答