如何解决无法读取“某物”未定义的属性

时间:2019-05-19 16:45:16

标签: angular ionic4

我正在尝试对sqlite db执行CRUD操作,创建表正常工作,但更新功能存在问题。

我试图更改采用表ID并进入更新页面的路由路径。

matches.ts

export class MatchesPage implements OnInit {
matches: Match[] = [];
match = {};
//myDate: String = new Date().toISOString();

constructor(private db: SqlitehelperService, private router: Router) {}

ngOnInit() {
this.db.getDatabaseState().subscribe(rdy => {
  if (rdy) {
    this.db.getMat().subscribe(match => {
      this.matches = match;
    });
  }
});
}
addMatch() {
this.db
  .addMatch(
    this.match["id"],
    this.match["btname"],
    this.match["bwname"],
    this.match["ocphone"],
    this.match["overs"],
    this.match["date"]
  )
  .then(_ => {
    console.log(this.match);
    this.match = {};
  });
 }
 }

match.html

<ion-header>
  <ion-toolbar>
    <ion-title>Start Match</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-input *ngIf="" [(ngModel)]="match.id"></ion-input>
  <ion-item>
    <ion-label position="stacked">Batting Team Name</ion-label>
    <ion-input [(ngModel)]="match.btname" placeholder="Batting Team Name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Bowling Team Name</ion-label>
    <ion-input [(ngModel)]="match.bwname" placeholder="Bowling Team Name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Other Captain Phone</ion-label>
    <ion-input [(ngModel)]="match.ocphone" placeholder="03XXXXXXXXX"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Overs</ion-label>
    <ion-input [(ngModel)]="match.overs" placeholder="20 | 50"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Date</ion-label>
    <ion-datetime displayFormat="YYYY-MM-DD THH:mmZ " [(ngModel)]="match.date"></ion-datetime>
  </ion-item>
  <ion-button expand="block" (click)="addMatch()">Add Match Info</ion-button>
**here i am navigating to the next page by router link and sending the below added match by clicking on particular item.**
  <hr>
  <ion-list>
    <ion-item button *ngFor="let item of matches" [routerLink]="[ '/', 'matches', item.matchID ]">
      <ion-label>
        <h2>{{ item.battingTeamName }}</h2>
        <br>
        <p>{{ item.bowlingTeamName }}</p>
        <br>
        <p>{{item.otherCaptainPhone}}</p>
        <br>
        <p>{{item.overs}}</p>
        <br>
        <p>{{item.createdAt}}</p>
        <br>
      </ion-label>
    </ion-item>
  </ion-list>


</ion-content>

** singleMatchpage smatch.ts ** 通过路径match /:matchID接收ID。

  export class SmatchPage implements OnInit {
  match: Match = null;

  constructor(
  private route: ActivatedRoute,
  private db: SqlitehelperService,
  private router: Router,
  private toast: ToastController
  ) {}

  ngOnInit() {
  this.route.paramMap.subscribe(para => {
  let mtid = para.get("id");
  this.db.getMatch(mtid).then(data => {
    this.match = data;
  });
  });
  }

和更新功能是:

    updateMatch() {
    this.db.updateMatch(this.match).then(async res => {
    let toast = await this.toast.create({
    message: "Match info updated",
    duration: 3000
    });
    toast.present();
    });
    }
  

总是收到此错误“无法读取未定义的属性matchID”

请帮我检查所有内容,无法找出我的代码中存在的问题。

2 个答案:

答案 0 :(得分:0)

尝试如下使用安全导航操作符

<ion-item button *ngFor="let item of matches" [routerLink]="[ '/', 'matches', item?.matchID ]">

答案 1 :(得分:0)

我想它将解决问题

repositories {
    mavenCentral()
}

sourceCompatibility = 1.8
targetCompatibility = 1.8

dependencies {
    compile 'org.springframework.boot:spring-boot-starter-data-mongodb:2.1.5.RELEASE'
    compile 'org.springframework:spring-web:5.1.7.RELEASE'
    compile 'org.springframework:spring-core:5.1.7.RELEASE'
}