typescript 属性'value'来自一个索引签名,所以必须用['value']访问它

nnvyjq4y  于 2023-03-31  发布在  TypeScript
关注(0)|答案(2)|浏览(283)

如何解决这个问题。
在具有两种类型错误控制台中
1)对象可能“未定义”。
=〉error in code --〉this.navigationExtras.state.value = item;
2)属性“value”来自索引签名,因此必须使用[“value”]访问它。
=〉error in code --〉this.navigationExtras.state.value = item;

list.component.ts文件

import { Component, OnInit } from '@angular/core';
import { NavigationExtras,Router} from '@angular/router'

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
 item:any;
 navigationExtras: NavigationExtras = {
   state: {
     value :null
   }
 };
  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  onGotoEdit(item:any):void{
    this.navigationExtras.state.value = item; //error 
    this.router.navigate(['edit'])
  }

  onGotoSee(item:any):void{
    this.router.navigate(['details'])
  }

  onGotoDelete(item:any):void{
    alert('Deleted');
  }

}

edit.components.ts

错误在这个文件--〉类型'{ [k:字符串]:任意;}|“undefined”不能分配给类型“null”。类型“undefined”不能分配给类型“null”。
代码错误--〉this.value = navigation?.extras?.state

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router'
@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.scss']
})
export class EditComponent implements OnInit {
  value = null;

  constructor(private router :Router) {
    const navigation = this.router.getCurrentNavigation();
    this.value = navigation?.extras?.state;
   }

  ngOnInit(): void {
  }

}
np8igboo

np8igboo1#

你确定你不知道传递给onGotoEdit()的是什么类型的项吗?最好是类型检查。让我们添加一个if检查,以确保我们有这个对象,我们正在尝试分配项。
但是索引签名错误是通过执行错误中所述的操作来修复的:.state['value'],而不是.state.value(或.state?.value)。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  item:any;
  navigationExtras: NavigationExtras = {
    state: {
      value : null
    }
  };

  constructor() {
    this.onGotoEdit('something');
    console.log(this.navigationExtras)
  }

  onGotoEdit(item:any):void {
    if (this.navigationExtras.state) {
      this.navigationExtras.state['value'] = item; 
    }
  }
}

下面是一个工作示例:https://stackblitz.com/edit/angular-ivy-295kkz?file=src%2Fapp%2Fapp.component.ts

hi3rlvi2

hi3rlvi22#

在表单或路由器状态/extra的情况下,明智的做法是使用['square-brakets'],但对于其他情况,我建议使用tsconfig.json更改

"compilerOptions": {
//
    "noPropertyAccessFromIndexSignature": false,

相关问题