Definition
export interface INewsModule{
IDNews:number;
IDCategoery:number;
NameNews:string;
TopicNews:string;
DateNews?:Date;
ImageCaption:string;
ImageName:string ;
}Implementation
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);
})
}
} <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"> </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());
}
Incorporating routing into the project
Index => allCategory => allnews => detailsNews[name,date....] using ng s --o
The project runs successfully
However, when deploying the project using
ng build --prod errors are displayed
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[]'.