Question

我是Angular的新手。我要做的任务是从PrimeNG轮播中创建可重用的组件。在这种情况下，用户将必须从哪个数组和哪个字段中输入数据以显示轮播中的数据，然后将这些参数绑定到可重用组件。

有没有办法用HTML来表达这样的内容：

<div *ngFor="let x of  someArray">
    <ul>
        <li>{{x.[specificField]}}</li>
    </ul>
</div>

然后在TS文件中从另一个组件数组中获取specificField参数？例如，从数组获取名称：

@Input()
someArray:Array<anotherArray>

@Input()
specificField:anotherArray.name

谢谢

Answer 1

我不确定您的数据集。因此，只需添加一个样本数据集以供参考。

组件：

let someArray= [{'name':'abc'}, {'name':'bcd'}, {'name3':'cde'}];
let field = 'name';

HTML：

<div *ngFor="let data of someArray">
  {{data[field]}}
</div>

Answer 2

我认为您要问的是按名称读取属性。这很有可能。

我只是假定了一些接口的集合，这是一个示例。

这是hello-component.ts

  @Input()
  someArray:Array<Employee>

  @Input()
  specificField:string[];

这是要渲染的模板。

<div *ngFor="let item of someArray">
    <ul>
        <li *ngFor="let name of specificField">{{name}} : {{item[name]}}</li>
    </ul>
</div>`

示例interface，

export interface Employee {
  name: string;
  age: number;
}

以下是您的hello-component的一些示例输入

  someArray = [
    {name: 'Person 1', age: 23},
    {name: 'Person 2', age: 33},
    {name: 'Person 3', age: 47},
    {name: 'Person 4', age: 43},
    {name: 'Person 5', age: 45},
  ] as Array<Employee>;

  specificField = ['name', 'age'];

输出：

这是stackblittz链接：https://stackblitz.com/edit/angular-ivy-qqf8sn?file=src/app/hello.component.ts

角度* ng用于访问数组的特定值

2 个答案: