如何在Angular中正确设置此属性？

2024-05-05 • 问答

我有一个界面：

export interface ItemResponse {
  get: Array<Item>;
  sent: Array<Item>;
}

我在组件中有一些代码：

itemData: ItemResponse;

ngOnInit() {
  this.getItems();
}

getItems(){
  this.itemService.getallItem().subscribe(data => {
    this.itemData = data;
  });
}

模板部分：

<item-table [data]="itemData.get"></item-table>

我需要多次使用角度材料表，因此我为此创建了一个组件。一个想要传递数据源，但我得到下一个错误：

ItemComponent.html:5 ERROR TypeError: Cannot read property 'get' of undefined
    at Object.eval [as updateDirectives] (ItemComponent.html:11)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:30537)
    at checkAndUpdateView (core.js:29933)
    at callViewaction (core.js:30174)
    at execComponentViewsaction (core.js:30116)
    at checkAndUpdateView (core.js:29939)
    at callViewaction (core.js:30174)
    at execEmbeddedViewsaction (core.js:30137)
    at checkAndUpdateView (core.js:29934)
    at callViewaction (core.js:30174)

我应该如何声明此属性？我尝试了很多方法，例如：

itemData = {get: [],sent:[]} as ItemResponse;

在这种情况下，itemData.get不是未定义的，但是它是空的。

您有什么想法，我该怎么办？对不起语法错误，英语不是我的母语。

由于getItems()执行异步操作并且 itemData为undefined，直到订阅返回值，您才收到错误消息。

您需要使用async pipe或 boolean标志（例如isLoaded）来等待订阅完成。

对于async管道，您可以执行以下操作：

getItems(){
    this.itemData = this.itemService.getAllItem();
}

在模板中

<item-table [data]="(itemData | async).get"></item-table>

或者如果您想使用布尔标志：

isLoaded = false;

getItems(){
    this.itemService.getAllItem().subscribe(data => {
       this.isLoaded = true;
       this.itemData = data;
    });
}

在模板中：

<item-table [data]="itemData.get" *ngIf="isLoaded"></item-table>

希望这会有所帮助

为什么不使用异步管道？

// Component
itemData$: Observable<ItemResponse>;

ngOnInit() {
 this.itemData$ = this.getItems();
}

getItems(){
return this.itemService.getAllItem();
}

在Temlpate中

<item-table [data]="(itemData$ | async)?.get"></item-table>

或者如果您不想使用异步管道将您的组件修改为此

<item-table *ngIf="itemData" [data]="itemData.get"></item-table>

您的代码很好，可以按预期工作。

问题在于，在异步调用返回之前，itemData是未定义的，因此，当模板尝试评估itemData.get时会出现错误

我建议使用安全导航器，也称为可选链接MDN：

<item-table [data]="itemData?.get"></item-table>

这将避免错误，因为只有定义了get时，它才会尝试获取itemData属性。

您应该使用RxJS，但将组件内部的数据映射到TextBox属性。

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        Loaded += OnLoaded;
        SizeChanged += OnSizeChanged;
    }

    private void OnSizeChanged(object sender,SizeChangedEventArgs e)
    {
        tb.Width = double.NaN;
    }

    private void OnLoaded(object sender,RoutedEventArgs e)
    {
        tb.Width = tb.ActualWidth;
    }
}

，并且在您的模板中，运行异步管道后无需访问属性

get

如何在Angular中正确设置此属性？

houzhd 回答：如何在Angular中正确设置此属性？

大家都在问