Question

界面

export interface  INewsModule{

   IDNews:number;
   IDCategoery:number; 
   NameNews:string; 
   TopicNews:string; 
   DateNews?:Date;
     ImageCaption:string;
    ImageName:string ;


}

组件

import { Component, OnInit, Input, Injectable } from '@angular/core';
import { NewsService } from '../../serv/news.service';
import { ActivatedRoute } from '@angular/router';
import { INewsModule } from '../../Class/i-news/i-news.module';
import { FormsModule } from '@angular/forms';
import {Http , Response , Headers , RequestOptions ,RequestMethod, } from '@angular/http';
import { ISubscription } from 'rxjs/Subscription';
import { HttpClient } from '@angular/common/http';
import { retry } from 'rxjs-compat/operator/retry';
@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-detalis',
  templateUrl: './detalis.component.html',
  styleUrls: ['./detalis.component.scss'],
  providers:[NewsService]
})
export class DetalisComponent implements OnInit {
 public Newsmodule : INewsModule[];
  subscription: ISubscription;
  statusMessage: string = 'please wait Loading data ... :D';
       items :INewsModule[]=[];

     constructor(public _NewsService : NewsService,public _activeRoute: ActivatedRoute,public _HttpClient: HttpClient    
      ) { }
      ngOnInit() {
          let id : number = this._activeRoute.snapshot.params['id'];
          this._NewsService.getdetails(id).retryWhen((err) => {
            return err.scan((retryCount) =>{
  retryCount +=1;
  if(retryCount < 6 ){
  this.statusMessage ='Retrying .....Attept #' + retryCount;
  return retryCount;
  } else {
  throw (err);
  }
  }, 0).delay(1000)
  })
    .subscribe((newsdata) => {
      if(newsdata == null){
        this.statusMessage = 'Employee code does not exist';
      } else {
          this.items = newsdata
      }
  
      },
      (error) =>{
        this.statusMessage = "please try again after sometime"
        console.log(error);
    })
  }
  }

模板DetalisComponent 模板DetalisComponent 模板DetalisComponent 模板DetalisComponent 模板DetalisComponent 模板DetalisComponent 模板DetalisComponent 更新

      <table class="blueTable" style="height: 212px;" width="333">
                  <thead>
                  <tr>
                  <th>NameNews</th>
                  <th>TopicNews</th>
                  <th>Date</th>
                  <th>Image</th>
                  </tr>
                  </thead>
                  <tfoot>
                  <tr>
                  <td colspan="4">
                  <div class="links">&nbsp;</div>
                  </td>
                  </tr>
                  </tfoot>
                  <tbody>
                  <tr  >

                <td>{{items.NameNews}}</td>
                  <td>{{items.TopicNews}}</td>
                  <td>{{items.DateNews}}</td>
                  <td><img class="" src="http://localhost:56181/Image/{{items.ImageName}}"> </td>
                  </tr>
                  </tbody>
                  </table>

/GetdetailsNews
    getdetails(id:number): Observable <INewsModule[]>{
      return   this.http.get('http://localhost:56181/api/details/' + id).map((response: Response)=><INewsModule[]>response.json());
      }

我使用路由

索引=> allCategory => allnews => detailsNews [名称，日期。...] 使用 ng s --o

项目成功运行

但是在使用

部署项目中

ng build --prod 显示错误

ERROR in src\app\views\home\detalis.component.html(126,21): : Property 'NameNews' does not exist on type 'INewsModule[]'.
src\app\views\home\detalis.component.html(127,23): : Property 'TopicNews' does not exist on type 'INewsModule[]'.
src\app\views\home\detalis.component.html(128,23): : Property 'DateNews' does not exist on type 'INewsModule[]'.
src\app\views\home\detalis.component.html(129,37): : Property 'ImageName' does not exist on type 'INewsModule[]'.

Answer 1

该错误来自以下事实：变量“ items”被键入为“ INewsModule”类型的元素数组（在组件中声明时）。您可能需要迭代该数组，或更改此变量的类型。

使用ng build --prod

1 个答案: