angular 6 无法在 html 表上显示 json 数据

Question

你好，我是 angular 6 和 webapi .net 核心的新手，我正在开发一个应用程序，从 webapi 获取数据并显示在 html 表中，web api 以 json 的形式返回数据，但 angular 表不显示数据，我的代码sn-ps如下

web api 返回数据为

[HttpGet]
        public IEnumerable<Patient> Get()
        {
            return _patientManager.GetAllPatients();
        }

在 Angular 客户端，我有一个正在工作的服务

 readonly rootURL = 'http://localhost:3922/api';

  constructor(private httpservice: HttpClient) { }

   getPatientData(): Observable<Patient[]> {

     return this.httpservice.get<Patient[]>(this.rootURL + '/Patient');
  }

组件写成

   export class PatientDetailListComponent implements OnInit {

  patient: Patient[];
  constructor(private service: PatientDetailService) { }

  ngOnInit() {
  this.service.getPatientData()
  .subscribe((data: Patient[]) => {
    this.patient = data ;
    console.log(data);
    });
   }

}

html 是

     <table class="table table-container">
 <thead>
     <tr>

         <th>PatientCode</th>
         <th>FirstName</th>
         <th>LastName</th>
         <th>MRN</th>
         <th>DateOFBirth</th>
     </tr>
 </thead>
 <tbody>
  <!--<tr ngfor = "let p of service.list">-->
   <tr *ngfor ="let p of patient;">
     <td>{{p?.PatientCode}}</td>
      <td>{{p?.FirstName}}</td>
      <td>{{p?.LastName}}</td>
      <td>{{p?.MRN}}</td>
      <td>{{p?.DateOfBirth}}</td>

</tr>
</tbody>
 </table>

我从 web api 获取如下

[{"PatientCode":"120477","FirstName":"Leonel","LastName":"Hernandez juan","MRN":"21625","DateOfBirth":"2012-03-21T00:00:00"},{"PatientCode":"120523","FirstName":"Traeson","LastName":"Serna","MRN":"22848","DateOfBirth":"2012-01-21T00:00:00"},{"PatientCode":"438264","FirstName":"Kaylee","LastName":"Leon","MRN":"LEONKAYL","DateOfBirth":"2012-01-22T00:00:00"},{"PatientCode":"476679","FirstName":"Bradyn","LastName":"Wade","MRN":"296500","DateOfBirth":"2012-03-11T00:00:00"},{"PatientCode":"458698","FirstName":"Madison a","LastName":"Petitt","MRN":"264267","DateOfBirth":"2012-05-16T00:00:00"},{"PatientCode":"267924","FirstName":"Madelyn","LastName":"Lencioni","MRN":"51934","DateOfBirth":"2012-02-05T00:00:00"},{"PatientCode":"444373","FirstName":"Emily","LastName":"Wilson","MRN":"231859","DateOfBirth":"2012-05-19T00:00:00"},{"PatientCode":"459560","FirstName":"Natalie","LastName":"Steinspring","MRN":"266611","DateOfBirth":"2012-05-13T00:00:00"},{"PatientCode":"459689","FirstName":"Maddox","LastName":"Johnson","MRN":"358859","DateOfBirth":"2012-02-24T00:00:00"},{"PatientCode":"306879","FirstName":"Jeremiah","LastName":"Benabe","MRN":"79178","DateOfBirth":"2012-01-21T00:00:00"},{"PatientCode":"388466","FirstName":"Jewellz","LastName":"Jones","MRN":"407331","DateOfBirth":"2012-06-08T00:00:00"},{"PatientCode":"388579","FirstName":"Trinity","LastName":"Myers","MRN":"609518","DateOfBirth":"2012-03-09T00:00:00"},{"PatientCode":"510217","FirstName":"Shubu ladeigh josiah","LastName":"Macthompson","MRN":"881738","DateOfBirth":"2012-06-24T00:00:00"},{"PatientCode":"538957","FirstName":"Ruvenia","LastName":"Sameer","MRN":"305381","DateOfBirth":"2012-02-19T00:00:00"},{"PatientCode":"554357","FirstName":"Kaleb","LastName":"Daniel","MRN":"960885","DateOfBirth":"2012-05-06T00:00:00"}]

但我在 html 视图中遇到错误

compiler.js:2430 未捕获错误：模板解析错误：无法绑定到 'ngforOf' 因为它不是 'tr' 的已知属性。 ("
--> ]*ngfor ="让病人 p；"> {{p?.PatientCode}} {{p?.FirstName}} "): ng:///AppModule/PatientDetailListComponent.html@13:7 属性绑定 嵌入模板上的任何指令均未使用 ngforOf。确保 属性名称拼写正确并且所有指令都是 在“@NgModule.declarations”中列出。 (" --> [错误->] {{p?.PatientCode}} {{p?.FirstName}} "): ng:///AppModule/PatientDetailListComponent.html@13:3 在 syntaxError (compiler.js:2430) 在 TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158) 在 compiler.js:26101 在 Set.forEach() 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101) 在 compiler.js:26011 在 Object.then (compiler.js:2421) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010) 语法错误@compiler.js:2430 push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @compiler.js:20605 push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @compiler.js:26171 push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @compiler.js:26158（匿名）@compiler.js:26101 push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @compiler.js:26101（匿名）@compiler.js:26011 然后@ 编译器.js:2421 push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @compiler.js:26010 push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @compiler.js:25970 push../node_modules/@angular/platform-b​​rowser-dynamic/fesm5/platform-b​​rowser-dynamic.js.CompilerImpl.compileModuleAsync @platform-b​​rowser-dynamic.js:143 compileNgModuleFactory__PRE_R3__ @ 核心.js:17618 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @core.js:17801 ./src/main.ts @main.ts:11 webpack_require @bootstrap:78 0 @main.ts:12 webpack_require@bootstrap:78 checkDeferredModules@bootstrap:45 webpackJsonpCallback@bootstrap:32（匿名）@main.js:1

请帮助我哪里做错了，花了一整天但没有找到TIA

Answer 1

你有一个错字，不是 *ngfor 而是：

<tr *ngFor="let p of patient">

您还应该检查您是否从服务器获取对象或 JSON 字符串