4

I'm new with angular 4 , and I'm trying to build my first application.

The title is displayed in the screen but get this error in the console :

enter image description here

This is line 26 in the html file:

<h1>{{result.title}}</h1>

This is TravelDetailComponent:

export class TravelDetailComponent implements OnInit {

result: string[];
id: number;

constructor(private http: Http, private globals: Globals, private activatedRoute: ActivatedRoute) {
}


ngOnInit() {
  this.activatedRoute.params.subscribe((params: Params) => {
      this.id = params['id'];
      console.log(this.id);
  });
  this.http.get(this.globals.baseUrl + 'travels/' + this.id)
      .map(res => res.json()).subscribe(result => this.result = 
result);
}

}

why the title is displayed in the screen but I get this error in the console and how can I solve it ?

hous
  • 2,577
  • 2
  • 27
  • 66
  • You get the error when the component is created, but later after the `this.http.get` completes the title is shown. – Reactgular Jul 31 '17 at 18:38
  • Error says that there is problem on line 10 in html. Without posting.html of your component it is hard to say where the problem is. – Ludevik Jul 31 '17 at 18:39
  • post your HTML here – Sajeetharan Jul 31 '17 at 18:41
  • this is line 26 in the html file :

    {{result.title}}

    . the title exist and it is not null and he is displayed , so why it says undefined property title ?     – hous Jul 31 '17 at 21:08
  • If you read our answers below you'll see that you need the elvis operator. In other words `

    {{ result?.title }}

    `     – joshrathke Jul 31 '17 at 21:12
  • Possible duplicate of [Observable type error: cannot read property of undefined](https://stackoverflow.com/questions/34734671/observable-type-error-cannot-read-property-of-undefined) – AT82 Aug 01 '17 at 18:50

3 Answers3

15

You'll run into this A TON in angular unless you familiarize yourself with the Angular Template Syntax. Specifically the use of the *ngIf and the elvis operator ?.

For example, if you are just wanting to display the title you could do the following to make sure the page doesn't try to render the title until it has one.

<h1 *ngIf="title">{{ title }}</h1>

Furthermore if you have an object with a property you can forgo the *ngIf and check to make sure the object has resolved. For instance let's say you save all of the page's data into the page object and like above, want to display the title.

<h1>{{ page?.title }}</h1>

If you wanted to be really safe, you could still wrap it in an *ngIf statement that checks the title specifically, but usually if you have data within the page object, it's safe to assume there's a title in there.

joshrathke
  • 7,564
  • 7
  • 23
  • 38
  • this is line 26 in the html file :

    {{result.title}}

    . the title exist and it is not null and he is displayed , so why I need to add safe operator "?" or yousing "if" , can you explain it to me please ?     – hous Jul 31 '17 at 21:10
  • Your template is checking for the title multiple times, probably faster than you can even recognize. So it fails a couple times when the page renders (yes it's null for a little bit), and then finally gets the value once the API call completes and returns a value to the observable. – joshrathke Jul 31 '17 at 21:13
  • The safe operator just helps the page not try to retrieve values until they are truly available, it saves errors, and in some cases prevents much more problematic scenarios. – joshrathke Jul 31 '17 at 21:15
2

You need to add safe operator in HTML to check if the value is present, this will avoid the above error if the value is not present

<h1>{{ yourObj?.title }}</h1>
joshrathke
  • 7,564
  • 7
  • 23
  • 38
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • this is line 26 in the html file :

    {{result.title}}

    . the title exist and it is not null and he is displayed , so why I need to add safe operator "?" , can you explain it to me please ?     – hous Jul 31 '17 at 21:09
  • Because you didn't map the result(object) from back end to any TypeScript model on client side. Please refer here: https://www.typescriptlang.org/docs/handbook/classes.html – Điển Trương Oct 21 '19 at 10:09
-1

You have probably not called the body-parser middleware. Add this to your code below the app initialization.

// body-parser

app.use(express.json())

app.use(express.urlencoded({
    extended: true
}));
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Amoro
  • 1