Почему * ngIF всегда оценивается как true в моем приложении Angular? - PullRequest
Новая
       34

Почему * ngIF всегда оценивается как true в моем приложении Angular?

0 голосов
/ 14 октября 2018

Я определяю Todo следующим образом: 

export class Todo {
  id: number;
  title: string;
  complete: boolean = false;
  editMode: boolean = false;
  }

У меня есть следующая служба данных: 

  getAllTodos(): Observable<Array<Todo>> {
     return this.aHttpService.get<Array<Todo>>('http://localhost:3000/todos');
  }

Тогда у меня есть этот компонент: 

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<Array<Todo>>;

  ngOnInit() {
    this.allTodos = this.todoDataService.getAllTodos();
  }
}

и в шаблоне, который у меня есть: 

<li *ngFor="let todo of allTodos | async" >
  <span *ngIf="todo.complete; else elseBlock"><span>&#10003;</span></span>
  <ng-template #elseBlock>
    <span>&#x2715;</span>
  </ng-template>
  <span>{{todo.title}}</span>
</li>

Однако todo.complete всегда оценивается как true, несмотря на то, что входящие данные не всегда true.(Я подтверждаю это через звонок в службу почтальона ...)

Почему значение всегда true?

Я должен отметить, что todo.title отображается правильно.

Обновление

Вызов http://localhost:3000/todos через Почтальона возвращает: 

[
{
    "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
}
]

1 Ответ

0 голосов
/ 14 октября 2018

Я был уверен, что complete придет как string вместо boolean.

, поскольку строка в *ngIf (и, как правило, в JavaScript if(...)) всегда разрешается в true (пока он не пустой ('')), на экране всегда отображался блок *ngIf, а elseBlock - нет.

Используйте это, чтобы исправить это: 

<span *ngIf="todo.complete === 'true'; else elseBlock"><span>&#10003;</span></span>
...