Question

我无法在html中呈现以下数据并且出现错误。控制台错误附加在代码下方。目前我在json中有单个数据，但未来可能更多。

processNo
prodLine
modelYear
team_NO
VMC

请帮助我，因为我是新手。我尝试过引用类似的问题，但它对我没用。

＆＃13;

/* json */

{
	"statuscode": 1,
	"message": "SUCESS",
	"template": null,
	"filter": {
		"controlNo": "25504",
		"processNo": "3A311",
		"plantCode": "T",
		"deptCode": "AF",
		"modelYear": "2017",
		"prodRate": "475",
		"prodLine": "3",
		"vmc": "A"
	}
}

/* controller */

constructor(private ReportServiceService:ReportServiceService) {   }

  ngOnInit() {  
    this.safetySummary();
  }

  safetySummary(){
    return this.ReportServiceService.getSafetySummary().subscribe(
      res => this.res = res.json())
  }
  
  
/* Error Msg in console */

compiler.es5.js:1689 Uncaught Error: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known property of 'div'. ("t Management - Process / Parts Summary</div>
  </div>
  <div class="container-fluid report-details" [ERROR ->]*ngFor="let i in res.filter">
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-"): ng:///AppModule/ProcessPartSummaryComponent.html@166:46
Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
      <div>Unit Management - Process / Parts Summary</div>
  </div>
  [ERROR ->]<div class="container-fluid report-details" *ngFor="let i in res.filter">
    <div class="row row-ite"): ng:///AppModule/ProcessPartSummaryComponent.html@166:2
    at syntaxError (http://localhost:4200/vendor.bundle.js:36022:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:47134:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:61179:39)
    at http://localhost:4200/vendor.bundle.js:61099:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:61099:19)
    at http://localhost:4200/vendor.bundle.js:60986:19
    at Object.then (http://localhost:4200/vendor.bundle.js:36012:148)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:60985:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:60914:37)

＆＃13;

<div class="container-fluid report-details" *ngFor="let i in res.filter">
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-twenty bold">Process No.:</span>
          <span class="width-thirty">{{i.processNo}}</span>
          <span class="width-ten bold">Line:</span>
          <span class="width-forty">3</span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-thirty bold">Model Cycle:</span>
          <span class="width-seventy">2017</span>
      </div>
    </div>
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-twenty bold">Team:</span>
          <span class="width-thirty">DL01</span>
          <span class="width-ten bold">VMC:</span>
          <span class="width-forty">3</span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-thirty bold">Part Effective Date:</span>
          <span class="width-seventy">05/30/2017</span>
      </div>
    </div>
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-twenty bold">Process Name:</span>
          <span class="width-forty">RIGHT FRONT HARNESS INSTALL</span>
          <span class="width-forty"></span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-thirty bold">Body/Line Loc:</span>
          <span class="width-seventy">D01R</span>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

let i in res.filter

应该是

let i of res.filter

我多次犯了这个错误。

Angular 2：无法渲染json

1 个答案: