title: Why does *ngIF always evaluate to true in my Angular app?
body: <p>I define <code>Todo</code> as follows:</p>
  
  <pre><code>export class Todo {
    id: number;
    title: string;
    complete: boolean = false;
    editMode: boolean = false;
    }
  </code></pre>
  
  <p>I have the following data service:</p>
  
  <pre><code>  getAllTodos(): Observable&lt;Array&lt;Todo&gt;&gt; {
       return this.aHttpService.get&lt;Array&lt;Todo&gt;&gt;('http://localhost:3000/todos');
    }
  </code></pre>
  
  <p>Then, I have this component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TodoDataService } from '../todo-data.service';
  import { Todo } from '../todo';
  import { Observable } from 'rxjs/Observable';
  
  @Component({
    selector: 'app-all-tasks',
    templateUrl: './all-tasks.component.html',
    styleUrls: ['./all-tasks.component.css']
  })
  export class AllTasksComponent implements OnInit {
    constructor(private todoDataService: TodoDataService) {}
    allTodos: Observable&lt;Array&lt;Todo&gt;&gt;;
  
    ngOnInit() {
      this.allTodos = this.todoDataService.getAllTodos();
    }
  }
  </code></pre>
  
  <p>and in the template I have:</p>
  
  <pre><code>&lt;li *ngFor="let todo of allTodos | async" &gt;
    &lt;span *ngIf="todo.complete; else elseBlock"&gt;&lt;span&gt;&amp;#10003;&lt;/span&gt;&lt;/span&gt;
    &lt;ng-template #elseBlock&gt;
      &lt;span&gt;&amp;#x2715;&lt;/span&gt;
    &lt;/ng-template&gt;
    &lt;span&gt;{{todo.title}}&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>However <code>todo.complete</code> always evaluates to <code>true</code>, despite the fact that the incoming data isn't always <code>true</code>. (I validate that via a call to the service with Postman...)</p>
  
  <p>Why is the value always <code>true</code>?</p>
  
  <p>I should note that the <code>todo.title</code> renders correctly. </p>
  
  <p><strong>Update</strong></p>
  
  <p>A call to <code>http://localhost:3000/todos</code> via Postman returns:</p>
  
  <pre><code>[
  {
      "id": 1,
      "title": "Learn TypeScript",
      "complete": "true",
      "editMode": "false"
  },
  {
      "id": 2,
      "title": "Learn Angular changed",
      "complete": "true",
      "editMode": "false"
  },
  {
      "id": 3,
      "title": "Learn to Read",
      "complete": "true",
      "editMode": "false"
  },
  {
      "id": 4,
      "title": "Learn to Write",
      "complete": "false",
      "editMode": "false"
  },
  {
      "title": "Learn how to type",
      "complete": "true",
      "editMode": "false",
      "id": 5
  },
  {
      "title": "Learn how to drive",
      "complete": "false",
      "editMode": "false",
      "id": 6
  }
  ]
  </code></pre>