Question

得到错误 TypeError：无法读取未定义的属性“列” 在 行号垫表

代码是材料角度

<mat-table #table>

  <ng-container matColumnDef="height">
    <mat-header-cell> ID </mat-header-cell>
    <mat-cell *ngFor="let visit of Visits"> {{visit.height}} </mat-cell>
  </ng-container>


  <ng-container matColumnDef="weight">
    <mat-header-cell> Progress </mat-header-cell>
    <mat-cell *ngFor="let visit"> {{visit.weight}}% </mat-cell>
  </ng-container>

  <ng-container matColumnDef="patientnote">
    <mat-header-cell > Name </mat-header-cell>
    <mat-cell *ngFor="let visit"> {{visit.patientnote}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="doctornote">
    <mat-header-cell > Color </mat-header-cell>
    <mat-cell *ngFor="let visit"> {{visit.doctornote}} </mat-cell>
  </ng-container>

</mat-table>

要显示表格中的值，我使用以下代码表是从角度材料构建的

export interface User {
    username: string;
    height: string;
    weight: string;
    Temperature: string;
    bloodpressure: string;
    patientnote: string;
    nursenote: string;
    doctornote: string;

    }

和界面

var timeoutId = setTimeout(fn, delay);
clearTimeout(timeoutId);

你能帮我解决这个问题吗

更新了现在正常运行的代码

Answer 1

您的服务未被调用，您需要将其置于 public constructor(private location: Location, private http: Http, private router: Router){ this.Visits = []; } ngOnInit(): void { this.http.get('http://localhost:8080/api/visit') .map(result => result.json()) .subscribe(result => { this.Visits = result; }); }

内

if (Toamount >= Greaterequal) {
        advising = Greaterequalcomment
}else if ((Toamount >= Betweenone) && (Toamount <= Betweentwo)) {
        advising = Betweencomment
}else {
        advising = Lessthanequalcomment
}


$("#Converting").empty();
$("#Converting").append("My advice is as follows: " + advising);

Answer 2

你的打字稿文件

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
  users = [];
  form: any;

  constructor(private httpClient: HttpClient) {

    this.form = new FormGroup({
      'first_name': new FormControl('', Validators.minLength(2)),
      'last_name': new FormControl('', Validators.required)
    })

    this.getUsers();
  }

  getUsers() {
    this.httpClient.get('https://reqres.in/api/users').subscribe(
      (response) => {
        console.log(response);
        this.users = response.data;
      },
      (error) => {
        console.log(error);
      }
    );
  }

  saveUser() {
    this.httpClient.post('https://reqres.in/api/users', this.form.value).subscribe(
      (response) => {
        console.log(response);
        this.users.unshift(response);
      },
      (error) => {
        console.log(error);
      }
    )
  }
}

你的html文件

开始编辑看到一些魔法发生:)

<form [formGroup]="form" (ngSubmit)="saveUser()">
      <input type="text" formControlName="first_name" placeholder="name">
      <input type="text" formControlName="last_name" placeholder="lname">
      <button type="submit">Save</button>
</form>

<div *ngFor="let user of users">
    <h1>{{ user.first_name }} {{ user.last_name }}</h1>
    <img [src]="user.avatar"/>
</div>

无法以角度显示表格中的值

2 个答案: