Angular数据获取报错：TS2345类型不匹配及代码问题咨询

核心错误原因 #

TS2345的本质是类型不匹配：你定义的openForm函数参数类型为null，但调用时传入了包含id/name/price/Storage等属性的mobile对象，TypeScript不允许这种类型赋值。

代码中的具体问题及修复 #

1. HTML模板语法错误 #

• 按钮绑定错误：原代码里的(click)-"openForm(mobile)"是语法错误，减号需改成等号，正确写法：

  <button class="btn btn-primary" (click)="openForm(mobile)">Edit</button>
  

• 插值表达式错误：((mobile.Storage }}是双括号格式错误，需修正为标准的Angular插值语法：

  <td>{{ mobile.Storage }}</td>
  

• 按钮类名拼写错误：btn tn-primary里的tn是笔误，改成btn-primary：

  <button class="btn btn-primary" (click)="openForm(mobile)">Edit</button>
  

• 标签未闭合：原HTML代码末尾的<button>标签和<td>标签都没闭合，需补充完整：

  <td>
    <button class="btn btn-primary" (click)="openForm(mobile)">Edit</button>
  </td>
  </tr>
  

2. TypeScript代码错误 #

• 关键字大小写错误：If(data)里的If需改成小写的if：

  if(data){
    // ...
  }
  

• 语句结束符错误：this.mobileprice=data.price:末尾的冒号需改成分号：

  this.mobileprice=data.price;
  

• 修复openForm函数的参数类型：
  首先定义Mobile接口（如果还没定义）：

  interface Mobile {
    id: number;
    name: string;
    price: number;
    ram: number;
    Storage: number;
  }
  

  然后修正openForm的参数类型，将原来的null改成Mobile：

  openForm(data: Mobile) {
    if(data){
      this.mobileId=data.id;
      this.mobileName=data.name;
      this.mobileprice=data.price;
      this.mobileRam=data.ram;
      this.mobileStorage=data.Storage;
    }
  }
  

完整修正后的关键代码片段 #

app.component.html #

<tr *ngFor="let mobile of mobiles">
  <td>{{ mobile.id }}</td>
  <td>{{ mobile.name}}</td>
  <td>{{ mobile.price }}</td>
  <td>{{ mobile.ram }}</td>
  <td>{{ mobile.Storage }}</td>
  <td>
    <button class="btn btn-primary" (click)="openForm(mobile)">Edit</button>
  </td>
</tr>

app.component.ts #

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

interface Mobile {
  id: number;
  name: string;
  price: number;
  ram: number;
  Storage: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mobiles: Mobile[] = []; // 假设这里是你的数据源
  mobileId!: number;
  mobileName!: string;
  mobileprice!: number;
  mobileRam!: number;
  mobileStorage!: number;

  openForm(data: Mobile) {
    if(data){
      this.mobileId=data.id;
      this.mobileName=data.name;
      this.mobileprice=data.price;
      this.mobileRam=data.ram;
      this.mobileStorage=data.Storage;
    }
  }
}

内容的提问来源于stack exchange，提问作者Harsha Vardhan