array.map在自定义材料下拉列表中打破应用程序

发布于 2025-02-09 21:17:25 字数 1072 浏览 0 评论 0原文

我实现了一种角度材料自定义＆lt; aT-select＆gt;使用＆lt; input＆gt;进行搜索。

如果我将选项作为数组＆lt; castureType进行，则可以正常工作，其中fasterType至少具有 value 和 label 属性。问题到了，例如，如果您没有通过最简单的map函数将其转换为，则该问题到达了。 /stackblitz.com/edit/bugged-searchable-select?file=src%2fapp%2fapp

;在这里观察：

  myConst = [
    { label: 'ASDF', value: 'asdf', zzz: 'zzz1' },
    { label: 'QWERTY', value: 'qwerty', zzz: 'zzz2' },
    { label: 'ASDF 2', value: 'asdf2', zzz: 'zzz3' },
  ];

  /** This works perfectly */
  correct() {
    return this.myConst;
  }

  /** This makes the app crash */
  incorrect() {
    return this.myConst.map((x) => (
      { label: x.label, value: x.value }
    ));
  }

编辑：

/** This works too. But I cannot implement this sometimes */
correct2 = this.myConst.map(x =>
  ({label: x.label, value: x.value})
);

/** And this crash too */
get incorrect2() {
  return this.myConst.map(x =>
    ({label: x.label, value: x.value})
  );
}

原文

I implemented an Angular Material custom <mat-select> to use an <input> for searching.

This works perfectly fine if I pass options as Array<CustomType, where CustomType has at least value and label properties. The problem arrives if, for example, instead of passing that options, I transformed it with the simplest map function as you can see in this demo

The problem can be observed here:

  myConst = [
    { label: 'ASDF', value: 'asdf', zzz: 'zzz1' },
    { label: 'QWERTY', value: 'qwerty', zzz: 'zzz2' },
    { label: 'ASDF 2', value: 'asdf2', zzz: 'zzz3' },
  ];

  /** This works perfectly */
  correct() {
    return this.myConst;
  }

  /** This makes the app crash */
  incorrect() {
    return this.myConst.map((x) => (
      { label: x.label, value: x.value }
    ));
  }

Edit:

/** This works too. But I cannot implement this sometimes */
correct2 = this.myConst.map(x =>
  ({label: x.label, value: x.value})
);

/** And this crash too */
get incorrect2() {
  return this.myConst.map(x =>
    ({label: x.label, value: x.value})
  );
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满栀 2025-02-16 21:17:25

编辑：我认为的修复程序根本没有修复它，因为现在该应用程序不会崩溃，搜索打字功能的搜索已消失：C

编辑2：我最终通过修复它，而不是使用search（）函数在键入时被调用，而是用相同的filteredValues a a get 功能！

我通过添加ngfor trackby角度函数来修复它

<mat-option *ngFor="let filter of filteredValues; trackBy: trackByFn" [value]="filter.value">
...
</mat-option>

trackByFn(idx: number, item: LabelValue) {
  return item.label;
}

Edit: The fix I thought, was not fixing it at all, because, now the app doesn't crash, the searching on typing ability is gone :c

Edit 2: I ended up fixing it by, instead of using a search() function that gets called on typing, I made filteredValues a get with the same functionality!

I fixed it by adding ngFor trackby Angular native function

<mat-option *ngFor="let filter of filteredValues; trackBy: trackByFn" [value]="filter.value">
...
</mat-option>

trackByFn(idx: number, item: LabelValue) {
  return item.label;
}

回复收藏 0 原文

~没有更多了~