* ngIf-else不显示其他结果

时间:2018-09-08 19:46:31

标签: node.js angular mongodb mongoose angular6

我不知道为什么这不起作用并且卡住了。任何人都可以发现我的代码有什么问题吗?

我试图在没有票证显示时显示未找到消息。我尝试通过门票数组长度获取结果,但始终显示长度为0。

HTML

<ng-container *ngIf="tickets; else elseTemplate">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-sm-4" *ngFor="let ticket of tickets">
        <div class="card">
          <h5 class="card-header"><span class="fa fa-ticket"></span> Pileti nr. {{ticket._id}}</h5>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #elseTemplate>
  <div><h1>Ticket not found.</h1></div>
</ng-template>

TS

import { Component, OnInit } from '@angular/core';
import { TicketService } from '../../ticket.service';
import { ActivatedRoute } from '@angular/router';
import * as moment from 'moment';
import {Location} from '@angular/common';

@Component({
  selector: 'app-reg-ticket-list',
  templateUrl: './reg-ticket-list.component.html',
  styleUrls: ['./reg-ticket-list.component.css']
})
export class RegTicketListComponent implements OnInit {

  reg: string;

  public tickets = [];

  constructor(private ticketService: TicketService, private route: ActivatedRoute, private _location: Location) { }

  ngOnInit() {
      this.reg = this.route.snapshot.params.reg;
      this.ticketService.getTicketsByReg(this.reg)
          .subscribe(data => this.tickets = data);
    }

    dateFormat(date) {
      moment.locale('et');
      return moment(date).format("Do MMMM YYYY HH:mm:ss")
    }

    goBack() {
      this._location.back();
    }

}

1 个答案:

答案 0 :(得分:3)

使用*ngIf="tickets;时,这只会检查tickets是否为false,并且空数组不是false(尽管null为)。

相反,您可以使用*ngIf="tickets && ticket.length;来检查长度是否不为0