错误TypeError:无法读取未定义的属性“名称"(离子4) [英] ERROR TypeError: Cannot read property 'name' of undefined (Ionic 4)

问题描述

类似问题的答案对我没有帮助

背景:

我一直在从Ionic应用程序配置SQL Server连接.有关上下文的信息，请参见我之前的问题

I have been configuring a SQL Server connection from my Ionic app. See my previous question for context

Ionic连接到ASP.NET MVC，然后连接到SQL Server.

Ionic connects to ASP.NET MVC, and that connects to SQL Server.

我设法将记录添加到SQL数据库中，其中id属性会自动递增，但是尽管我通过ion-input传递了该属性的字符串，但name属性始终为NULL.

I have managed to get records to be added to the SQL database, where the id property auto-increments but the name property is always NULL despite me passing a string for the property via ion-input.

错误消息:

错误TypeError:无法读取未定义的属性名称"

ERROR TypeError: Cannot read property 'name' of undefined

at Object.eval [as updateRenderer] (SqlPage.html:17)     
at Object.debugUpdateRenderer [as updateRenderer] (core.js:23936)     
at checkAndUpdateView (core.js:23311)     
at callViewAction (core.js:23547)        
at execEmbeddedViewsAction (core.js:23510)         
at checkAndUpdateView (core.js:23307)       
at callViewAction (core.js:23547)        
at execComponentViewsAction (core.js:23489)         
at checkAndUpdateView (core.js:23312)
at callViewAction (core.js:23547)

以下是相关文件，如果您需要查看其他文件，请告诉我:

Here are the relevant files, if there are other files you need to see let me know:

sql.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>sql</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label>Name</ion-label>
  <ion-input type="text" [(ngModel)]="id" hidden></ion-input>
  <ion-input type="text" [(ngModel)]="name"></ion-input>
  </ion-item>
  <ion-button (click)="Add()">Add</ion-button>

  <ion-list>
  <ul>
  <li *ngFor="let items of items">
    {{ item.name }}
  <ion-button (click)="Edit(item)">Edit</ion-button>
  <ion-button (click)="Delete(item)">Delete</ion-button>


  </li>
  </ul>
  </ion-list>
</ion-content>

sql.page.ts

import { Component, OnInit } from '@angular/core';
import { SqlService } from '../../services/sql.service'

@Component({
  selector: 'app-sql',
  templateUrl: './sql.page.html',
  styleUrls: ['./sql.page.scss'],
})
export class SqlPage implements OnInit {
  items=[];
  id: string;
  name: string;

  constructor(public sql: SqlService) { 
    this.getAll()
  }

  ngOnInit() {
  }

  getAll() {
    this.items=[];
    this.sql.getAll().subscribe(data=>{
      for(var i=0;i<data.length;i++){
        this.items.push(data[i]);
      }
    })

  }

  Add() {
    if(this.id==null){
    this.sql.Create(this.name).subscribe(data=>{
      this.name=name;
      this.getAll();
    })
  }else {
    this.sql.Update(this.id, this.name).subscribe(data=>{
      //this.id=null
      this.name=name;
      this.getAll();
    })
  }        
}

  Edit(item) {
    this.id = item.id
    this.name = item.name
  }

  Delete(item) {
    this.sql.Delete(item.id).subscribe(data=>{
      this.getAll()
    })

  }

}

sql.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestMethod, RequestOptions } from '@angular/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SqlService {

  url:string="http://localhost:50287/api/APIDemo/"
  constructor(private http: Http) { }

getAll(){
  return this.http.get(this.url).pipe(map(res=>res.json()));
}

Create(name) {
  var body=JSON.stringify({name});
  var header=new Headers({'Content-Type':'application/json'})
  var option=new RequestOptions({method:RequestMethod.Post,headers:header})
  return this.http.post(this.url + "Posttest",body,option).pipe(map(res=>res.json()))
}

Update(id, name) {
  var body={"id":id,"name":name};
  var header=new Headers({'Content-Type':'application/json'})
  var option=new RequestOptions({method:RequestMethod.Post,headers:header})
  return this.http.post(this.url,body,option).pipe(map(res=>res.json()))
}

Read(id) {
  return this.http.get(this.url+id).pipe(map(res=>res.json()))
}

Delete(id) {
  return this.http.delete(this.url+id).pipe(map(res=>res.json()))
}

}

为什么我收到此错误消息，我做错了什么?感谢您的帮助.

Why am I getting this error message, what have I done wrong? Any help is appreciated.

推荐答案

我在这里可以看到两个问题:

I can see two issues here:

1-在*ngFor

let items

更改为

let item 

2-在SqlPage类中

2 - In the class SqlPage

更改

  items=[];
  id: string;
  name: string;

到

  items=[];
  id: string = "";
  name: string = ""; 

在JavaScript中定义变量时，其默认值为undefined

When you define a variable in JavaScript it has a default value of undefined

这篇关于错误TypeError:无法读取未定义的属性“名称"(离子4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！