Question

我正在使用Angular 6开发表单，并使用一些标准的组件，包括ng-select（我认为这是必要条件）。表单应该具有相当复杂的逻辑（某些字段值会影响ng-select应该显示的其他值或建议）。我有一个比较笼统的问题（希望有一种我尚未找到的方法），但为了更具体一点，让我们考虑以下示例：

我有2个字典（我们称它们为类别和项），每个项都是某个类别的“子级”

我必须让用户从每个词典中选择一个类别和一个项目，因为我有两个字段，例如

<ng-select
  name="category"
  [items]="formSuggestions.categories$ | async"
  bindLabel="name"
  [(ngModel)]="formFields.category"
></ng-select>

<ng-select
  name="item"
  [items]="formSuggestions.items$ | async"
  bindLabel="name"
  [(ngModel)]="formFields.item"
></ng-select>

（实际上，它们被包装在自定义组件中，为简单起见，我省略了它们）

（此处formSuggestions.items$和formSuggestions.categories$是可观察到的，充满了有关服务器响应的建议；每个项目实际上是一个具有id，name和{ {1}}）
我需要的是：选择类别时，针对项目的建议仅限于属于该类别的子项；选择项目时，会自动设置类别

我的问题是：Angular中是否有一种方法可以“订阅”模型中某个属性的更改（parentId）并将其应用于其他属性（formFields.item，formFields.category）或解决此问题的唯一方法是将每个字段的输出设置为formSuggestions.categories$？

该方法的问题在于实际形式更加复杂，例如：

应该在模式窗口中显示另一个界面，用户可以在其中选择 category （与 item 相同），因此有多个可以改变道具的点< / li>
item 的选择应影响另一个ng-select的建议（针对另一个字段），并使用该项目的默认内容预先填充一些原始界面
顺便说一句，我每次只显示10条建议（建议字典很长），并且ng-select中没有“限制”选项，因此我必须根据字段值影响建议列表
...

所以我真的很想知道我是否可以减少模板驱动。有任何建议，至少对于2种选择情况？

Answer 1

(change)正在侦听经典输入更改事件（不是特定于Angular）。另请参见MDN-Link

对于所有[(ngModel)]绑定的元素，您还可以使用(ngModelChange)来监听更改。多数民众赞成在更多的角度样式。当您使用ControlValueAccessor创建自己的“输入”组件时，它会变得更加有趣。

您的示例中的问题是，您直接使用已订阅的意见类别。您可以（理论上）在可观察的流中进行“映射”，并过滤掉不需要的值。但这仅适用于可观察到的每个发射事件。

因此，在您的情况下，我担心您必须订阅源，并将结果存储在组件局部变量中。您还将数据复制到用于在UI上显示值的第二个变量中。
每当用户选择类别时，您都将获取原始存储的数据，对其进行过滤，然后将过滤后的结果分配给第二个变量。

HTML

<ng-select
  name="category"
  [items]="formSuggestions.categories$ | async"
  bindLabel="name"
  [(ngModel)]="formFields.category"
  (ngModelChange)="filterCategorySugestions($selectedValue)"
></ng-select>

然后在Typescript中，您将使用filterCategorySugestions方法来过滤数据并将其写入您的第二个变量（如上所述）。

顺便说一句，在过滤时，您可以随后应用mylist.splice(10)（标准Array方法）将结果限制为前10个。但是也许您应该确保先确定顺序。：-）

我希望能有所帮助。

热烈的问候扬

我可以通过非模板驱动的方式基于其他属性的变化来影响Angular组件的属性吗？

1 个答案: