将常数值的子集传递给 angular 组件

Question

我在我的一个模型中定义了以下常量。

    export const NEWS_TYPE_TEXT = {
      News: 'News',
      Interview: 'Interview',
      Digest: 'Digest',
      CompanyAnalysis: 'Company Analysis',
    };

通常我会将整个常量传递给组件，即：

<mb-simple-select [options]="NEWS_TYPE_TEXT"> </mb-simple-select>

但现在我只需要传递这些值的一个子集。（例如，只有 'News' 和 'Digest'）。

我尝试了以下方法，但不起作用：

<simple-select [options]="NEWS_TYPE_TEXT.News, NEWS_TYPE_TEXT.Digest"></simple-select>

然后我尝试了以下方法。这可行，但将值作为数组传递，并且仅传递实际文本值，不带键：

<simple-select [options]="[NEWS_TYPE_TEXT.News, NEWS_TYPE_TEXT.Digest]"></simple-select>

是否有一种优雅的方式将此值子集传递给组件，以便它们保留其对象 key:value 结构？

提前致谢。

Answer 1

我建议您为所需的选项定义 class 并传递它。

即：

为新闻、摘要定义 class X
在 ts 中分配 X 的值
定义@Input() 以支持简单内部的 X-select
将 X 传递给简单-select

Answer 2

尝试这样的事情：

<simple-select [options]="{News: NEWS_TYPE_TEXT.News, Digest: NEWS_TYPE_TEXT.Digest}"></simple-select>

Answer 3

我认为这个问题没有直接的答案。您可能必须创建一个快速管道来生成仅包含您希望拥有的属性的对象。

尝试以下方法

pluck.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "pluck", pure: true })
export class PluckPipe implements PipeTransform {
  transform(value: {[key: string]: string}, args?: Array<string>): any {
    if (!value) return null;

    return args.reduce((acc, curr) => {
      acc[curr] = value[curr];
      return acc;
    }, Object.create(null));
  }
}

用法

<simple-select [options]="NEWS_TYPE_TEXT | pluck:['News','Digest']"></simple-select>

工作示例：Stackblitz

^{Pipe 同名是 RxJS pluck 运算符。除了名字之外，它与手头的问题完全无关。}

将常数值的子集传递给 angular 组件

Passing subset of constant values to angular component

constants

object

subset

angular