Property does not exist on type component ng build --prod

ERROR in src\app\views\home\detalis.component.html(126,21): : Property 'items' does not exist on type 'DetalisComponent'. src\app\views\home\detalis.component.html(127,23):

: Property 'items' does not exist on type 'DetalisComponent'. src\app\views\home\detalis.component.html(128,23): :

Property 'items' does not exist on type 'DetalisComponent'. src\app\views\home\detalis.component.html(129,37): : Property 'items' does not exist on type 'DetalisComponent'.

INewsModule

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ICategoryModule {
public NameCategory:string;
public DateCategory?:Date;
IDCategoery?:number;
}
//
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';
@Component({
selector: 'app-detalis',
templateUrl: './detalis.component.html',
styleUrls: ['./detalis.component.scss'],
providers:[NewsService]
})
export class DetalisComponent implements OnInit {
subscription: ISubscription;
statusMessage: string = 'please wait Loading data ... :D';
public items : INewsModule[];
constructor(public _NewsService : NewsService,public _activeRoute: ActivatedRoute,public _HttpClient: HttpClient
) { }
// private items :any[]= [];
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 = 'code does not exist';
} else {
this.items = newsdata
}
},
(error) =>{
this.statusMessage = "please try again after sometime"
console.log(error);
})
}
}

>
<html lang="zxx" class="no-js">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="/assets/img/fav.png">
<meta name="author" content="colorlib">
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="UTF-8">
<title>Magazinetitle>
<div class="navbar-right">
<form class="Search">
<input type="text" class="form-control Search-box" name="Search-box" id="Search-box" placeholder="Search">
<label for="Search-box" class="Search-box-label">
<span class="lnr lnr-magnifier">span>
label>
<span class="Search-close">
<span class="lnr lnr-cross">span>
span>
form>
div>
div>
div>
header>
<div class="site-main-container">
<section class="top-post-area pt-10">
<div class="container no-padding">
<div class="row">
<div class="col-lg-12">
<div class="">
<table class="blueTable" style="height: 212px;" width="333">
<thead>
<tr>
<th>NameNewsth>
<th>TopicNewsth>
<th>Dateth>
<th>Imageth>
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>
<p class="text-white link-nav"><a href="index.html">Home a> <span class="lnr lnr-arrow-right">span><a
href="category.html">Posts Categorya>p>
div>
div>
<div class="col-lg-12">
<div class="news-tracker-wrap">
<h6><span>Breaking News:span> <a href="#">Astronomy Binoculars A Great Alternativea>h6>
div>
div>
div>
div>
section>
<section class="latest-post-area pb-120">
<div class="container no-padding">
<div class="row">
<div class="col-lg-8 post-list">
<div class="latest-post-wrap">
<h4 class="cat-title">Latest Newsh4>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/l1.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Lifestylea>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p class="excert">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/l2.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Sciencea>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/l3.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Travela>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/l4.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Fashiona>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/r1.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Sciencea>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/r2.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Travela>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/r3.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Fashiona>li>
ul>
div>
<div class="col-lg-7 post-right">
<a href="image-post.html">
<h4>A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 Commentsa>li>
ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
p>
div>
div>
<div class="load-more">
<a href="#" class="primary-btn">Load More Postsa>
div>
div>
div>
<div class="col-lg-4">
<div class="sidebars-area">
<div class="single-sidebar-widget editors-pick-widget">
<h6 class="title">Editorâ€™s Pickh6>
<div class="editors-pick-post">
<div class="feature-img-wrap relative">
<div class="feature-img relative">
<div class="overlay overlay-bg">div>
<img class="img-fluid" src="/assets/img/e1.jpg" alt="">
div>
<ul class="tags">
<li><a href="#">Travela>li>
ul>
div>
<div class="details">
<a href="image-post.html">
<h4 class="mt-20">A Discount Toner Cartridge Is
Better Than Ever.h4>
a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-user">span>Mark wiensa>li>
<li><a href="#"><span class="lnr lnr-calendar-full">span>03 April, 2018a>li>
<li><a href="#"><span class="lnr lnr-bubble">span>06 a>li>
ul>
<p class="excert">
Lorem ipsum dolor sit amet, consecteturadip isicing elit, sed do eiusmod tempor incididunt ed do
eius.
p>
div>
div>
div>
<div class="single-sidebar-widget ads-widget">
<img class="img-fluid" src="/assets/img/sidebar-ads.jpg" alt="">
div>
<h6 class="title">Social Networksh6>
<ul class="social-list">
<li class="d-flex justify-content-between align-items-center fb">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-facebook" aria-hidden="true">i>
<p>983 Likesp>
div>
<a href="#">Like our pagea>
li>
<li class="d-flex justify-content-between align-items-center tw">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-twitter" aria-hidden="true">i>
<p>983 Followersp>
div>
<a href="#">Follow Usa>
li>
<li class="d-flex justify-content-between align-items-center yt">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-youtube-play" aria-hidden="true">i>
<p>983 Subscriberp>
div>
<a href="#">Subscribea>
li>
<li class="d-flex justify-content-between align-items-center rs">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-rss" aria-hidden="true">i>
<p>983 Subscribep>
div>
<a href="#">Subscribea>
li>
ul>
div>
div>
div>
div>
div>
section>
div>
body>
html>

9 Replies

Know the answer? Post it — somebody with the same question will find it here.

bishoe nb7y ago
solved

change

public items : INewsModule[];

to

public items : INewsModule;
0
bishoe nb7y ago
how can

I think you need to convert json data to an array and it will work!
0
bishoe nb7y ago
not working

in details

show data based id news from

let id : number = this._activeRoute.snapshot.params['id'];

//GetdetailsNews
getdetails(id:number): Observable {
return this.http.get('http://localhost:56181/api/details/' + id).map((response: Response)=>response.json());
}
0
Faisal Pathan7y ago
https://stackoverflow.com/questions/39819392/cannot-find-a-differ-supporting-object-object-object-of-type-object-ngfor

https://forum.ionicframework.com/t/solved-ngfor-only-supports-binding-to-iterables-such-as-arrays/59597

from the above links, you will get a solution.
0
bishoe nb7y ago
how can
0
Faisal Pathan7y ago
I think you need to convert json data to an array and it will work!
0
bishoe nb7y ago
update
INewsModule
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})

//
export interface INewsModule{
IDNews:number;
IDCategoery:number;
NameNews:string;
TopicNews:string;
DateNews?:Date;
ImageCaption:string;
ImageName:string ;
}
0
bishoe nb7y ago
Faisal Pathan
i using routing

Home => categorys => news => detailsnews

my code work
but in build using

ng build --prod
build not complete

and show Errors

your code work in build but in project not work

DetalisComponent.html:125 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
0
Faisal Pathan7y ago
As per your code I think you declared items as an array

you should write
<tr *ngFor="let item of items">
          <td>{{item.NameNews}}td>
          <td>{{item.TopicNews}}td>
          <td>{{item.DateNews}}td>
          <td>{{item.EmpName}}td>
        tr>
+1