主页 / coding / 问题 / 79134045
Accepted
Cory Kramer
Asked: 2024-10-28 23:21:56 +0800 CST

如何为所需的 Angular 输入信号设置默认数组值？

  • 772

当使用Angular 信号输入时，如果我想指定所需的输入数组

import { input } from '@angular/core';

values = input.required<number[]>([]);

我收到构建错误（StackBlitz）

TS2559：类型“never[]”与类型“InputOptionsWithoutTransform<number[]>”没有共同的属性。[插件 angular-compiler]

指定默认值的正确方法是什么？

angular

1 个回答

  1. Best Answer

    当input设置信号时required，这意味着该值肯定会存在，否则 angular 编译器会抛出错误，应用程序将无法启动。所以不需要设置默认值。

      values: InputSignal<number[]> = input.required<number[]>();

    Stackblitz 演示错误

    您收到错误的原因是因为它需要transform您提供的属性[]，它应该是这样的：

    1. transform-> 在发送到组件之前转换输入。

    2. alias-> 可用于将数据传递给组件的另一个名称。

    要使用这两个属性，请确保将输入信号的类型设置为input.required<number[], number[]>({ ... })。

    import { Component, input, InputSignal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [JsonPipe],
  template: `{{values() | json}}`,
})
export class Child {
  values: InputSignal<number[]> = input.required<number[], number[]>({
    transform: (innerValues: number[]) => innerValues.map((x: number) => x * 5),
    alias: 'valuesProxy',
  });
}

@Component({
  selector: 'app-root',
  imports: [Child],
  standalone: true,
  template: `<app-child [valuesProxy]="values"/>`,
})
export class App {
  values = [1, 2, 3, 4, 5];
}

bootstrapApplication(App);

    Stackblitz 演示

    • 1

相关问题