为什么数据不显示？在表中

Question

为什么数据没有显示？在表格中

数据从 api 正确返回，因为它在控制台中显示 为什么没有出现在表格中 请帮忙

填充数据源的对象类型

export class Friend {
    constructor(
        public PaymentDetalisId: number = 0,
        public CardOwnerName: string = '',
        public CardNumber: string = '',
        public SecurityCode: string = '',
        public ExpirationDate: string = '',
    ) {}
}

服务（.ts 文件）

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Friend } from './friend.model';


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

readonly url = "https://localhost:44311";
readonly api = "api/Pay";

list: Friend[] = [];
formData: Friend = new Friend();

constructor(private http: HttpClient) { }


postPaymentDetails() {

return this.http.post(`${this.url}/${this.api}`, this.formData)
}
refreshlist() {
this.http.get<Friend[]>(`${this.url}/${this.api}`)
  .toPromise()
  .then(res => {

    this.list = res
    console.log(this.list); //ok print array

  })
}
}

组件（.ts 文件）

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { PaymentDetailService } from '../shared/payment-detail.service';

@Component({
selector: 'app-payment-details',
templateUrl: './payment-details.component.html',
styles: [
]
})
export class PaymentDetailsComponent implements OnInit {

constructor(public service: PaymentDetailService) { }

ngOnInit() {
this.service.refreshlist()
}
}

HTML 页面

<tbody>
        <tr *ngFor="let pd of service.list ; index as i">
           <td>{{i}}</td>
           <td (click)="populateForm(pd)">{{pd.CardOnerName |json}}</td>
           <td (click)="populateForm(pd)">{{pd.CardNumber}}</td>
           <td (click)="populateForm(pd)">{{pd.ExpirationDate}}</td>
           <td><i class="far fa-trash-alt fa-lg text-danger"></i></td>
        </tr>
 </tbody>

API

[
    {
        "paymentDetalisId": 1,
        "cardOwnerName": "aaaa",
        "cardNumber": "1234567890123456",
        "securityCode": "123",
        "expirationDate": "21/23"
    },
    {
        "paymentDetalisId": 2,
        "cardOwnerName": "bbbb",
        "cardNumber": "1234567890123400",
        "securityCode": "555",
        "expirationDate": "09/25"
    },
    {
        "paymentDetalisId": 3,
        "cardOwnerName": "cccc",
        "cardNumber": "1234567890123400",
        "securityCode": "555",
        "expirationDate": "09/25"
    },
    {
        "paymentDetalisId": 4,
        "cardOwnerName": "dddd",
        "cardNumber": "123456789010000",
        "securityCode": "555",
        "expirationDate": "09/25"
    },
    {
        "paymentDetalisId": 5,
        "cardOwnerName": "eeee",
        "cardNumber": "1234567895000000",
        "securityCode": "369",
        "expirationDate": "10/25"
    },
    {
        "paymentDetalisId": 6,
        "cardOwnerName": "fffff",
        "cardNumber": "7894561231478523",
        "securityCode": "214",
        "expirationDate": "08/24"
    },
    {
        "paymentDetalisId": 7,
        "cardOwnerName": "rrrr",
        "cardNumber": "4567892587410325",
        "securityCode": "585",
        "expirationDate": "10/27"
    },
    {
        "paymentDetalisId": 8,
        "cardOwnerName": "tttttttttt",
        "cardNumber": "1258746987452100",
        "securityCode": "333",
        "expirationDate": "12/22"
    }
]

看图片 The data appears in the console In the table it appears but is empty even though it is the same length as the array

一张清楚地显示问题的图片 look image

Answer 1

我找到了解决方案 属性的第一个字母是 Small，不是 Cable

前

paymentDetalisId
cardOwnerName
卡号
安全码
过期日期