Question

角度函数返回未定义

2022-10-15

418

javascript angular typescript

您好，我不明白为什么控制台日志在 Angular 中返回未定义。我正尝试在 html 中显示卡片上的数据。计划是连接传入的任何数据并通过 cardValue 显示它

Service.ts

incomingData(): Observable<any> {
    return this.httpClient.get<any>('this_is_incoming_data/', {});
  }

Component.ts

cardDetails = [
    {
     cardValue: console.log('this is test 3, 'this.custom()),
    }


returnedData: any;

ngOnInit(): any {
  this.Service.incomingData().subscribe((data: any) => {
    this.returnedData = data;
    console.log('test1',this.returnedData);
    this.custom();
  });
} 


custom(): any {
    const placeholder = "hello"
    return placeholder 
}

cardValue: {Name: John, Size: Medium, Age: 34}

在 console.log 上，测试 1-3 的日志完全正常且符合预期，但是当我将 custom() 更改为需要卡片值时，如下所示。

custom(): any {
  const placeholder = this.returnedData.cardValue] 
  return placeholder
}

测试 3 返回未定义并给我一个错误未捕获（在承诺中）：TypeError：无法读取未定义的属性（读取“cardValue”）

我知道问题出在自定义函数中，但我不知道如何更改它才能使其正常工作

Answer 1

以下代码在 ngOnInit 之前运行。 this.returnedData 在 ngOnInit 中设置，因此它会为 this.returnedData.cardValue 抛出错误，因为 returnedData 未定义。

cardDetails = [
    {
     cardValue: console.log('this is test 3, 'this.custom()),
    }

将您的自定义代码更改为如下所示。这将确保如果未设置 returnedData，则占位符为空，否则返回数据的卡值。

const placeholder = this.returnedData? 
this.returnedData.cardValue : '';

Answer 2

未定义的问题是由于可观察对象的异步线程造成的，请在收到数据时接受参数来修改您的 custom() 方法

ngOnInit(): any {
  this.Service.incomingData().subscribe((data: any) => {
    this.returnedData = data;
    this.custom(this.returnedData.cardValue);
  });
} 


custom(value): any {
    const placeholder = value
    return placeholder 
}