[英]angular 9 reorder/sort siblings dom by using querylist(contentChildren or ViewChildren)
I was wondering whether angular let you reorder/sort the sibling DOMs or not.我想知道 angular 是否允许您重新排序/排序兄弟 DOM。
For example, If I want to re-arrange(change the order) the opt
component.例如,如果我想重新排列(更改顺序)
opt
组件。 How can I do it?我该怎么做?
my-lib-select
is a select or Dropdown component and opt
is a child component to generate the options for select. my-lib-select
是 select 或 Dropdown 组件,而opt
是用于生成 select 选项的子组件。
Component is generated or render in other components like this.像这样在其他组件中生成或渲染组件。
Ie app.component.ts
即
app.component.ts
<my-lib-select [customComparator]="customComparatorFn">
<opt *ngFor="let x of finalCompOptions">{{x}}</opt>
</my-lib-select>
In my-lib-select
, I have a QueryList在
my-lib-select
,我有一个 QueryList
@ContentChildren(OptComponent, {descendants: true, read: OptComponent})
options: QueryList<OptComponent>;
....
if (this.customComparator) {
const arr = this.options.toArray();
arr.sort(this.customComparator);
this.options.reset(arr);
}
But this is not ordering the siblings or sorting.但这不是对兄弟姐妹进行排序或排序。
I know, I can sort the finalCompOptions
in app.component.ts
but I would like to sort the options from my-lib-select
.我知道,我可以对
finalCompOptions
中的app.component.ts
进行排序,但我想对my-lib-select
中的选项进行排序。
Anybody can help me out with this?有人可以帮我解决这个问题吗?
Thanks in advance.提前致谢。
I feel you've got two ways of tackling this.我觉得你有两种方法可以解决这个问题。
Method 1 - You reorder the items within app.component.ts prior to render/passing them through your ngFor.方法 1 - 在通过 ngFor 渲染/传递它们之前重新排序 app.component.ts 中的项目。
Method 2 - You reorder using a custom pipe like seen in this answer here方法 2 - 您使用自定义 pipe 重新排序, 就像在此答案中看到的一样
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.