我正在学习一门Typescript/Angular课程，该课程向我展示了如何使用“*ngIf”。讲师给出了一个空数组的示例，这样它就不会满足条件，并编译第二组ul标记。这对讲师有效，但对我无效。
image-box.component.html

<div id="image-box">
    <div class="left">
        <img src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
        <app-title></app-title>
    </div>
    <div class="right">
        <h3>Contracts</h3>
        <ul *ngIf="contractInComponent.length > 0">
            <li *ngFor="let contract of contractInComponent">
                Service: {{ contract.service }} <br>
                Title: {{ contract.title }}
            </li>
        </ul>
        <ul *ngIf="contractInComponent.length == 0">
            <li>Empty</li>
        </ul>
    </div>
</div>

get-data.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GetDataService {

  constructor() { }

  getContracts() {
    return [];
  }
}

image-box.component.ts

import { Component, OnInit } from '@angular/core';
//import { ImageBoxService } from './image-box.service';
import { GetDataService } from './get-data.service';

@Component({
  selector: 'app-image-box',
  templateUrl: './image-box.component.html',
  styleUrls: ['./image-box.component.scss']
})
export class ImageBoxComponent implements OnInit {
  contractInComponent;
  constructor(service:
    GetDataService) {
    this.contractInComponent = service.getContracts();
  }

  ngOnInit() {}
}

编译有问题：

ERROR

src/app/image-box/image-box.component.html:12:38 - error TS2339: Property 'service' does not exist on type 'never'.

12                 Service: {{ contract.service }} <br>
                                        ~~~~~~~

  src/app/image-box/image-box.component.ts:7:16
    7   templateUrl: './image-box.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ImageBoxComponent.

ERROR

src/app/image-box/image-box.component.html:13:36 - error TS2339: Property 'title' does not exist on type 'never'.

13                 Title: {{ contract.title }}
                                      ~~~~~

  src/app/image-box/image-box.component.ts:7:16
    7   templateUrl: './image-box.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ImageBoxComponent.

当我显式地使用布尔值时，这是有效的。第一个ul标签被忽略，并编译第二个集合。输出为0。
image-box.component.html

<div id="image-box">
    <div class="left">
        <!-- <h2>{{ contractInComponent[0].service }}</h2> -->
        <img src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
        <app-title></app-title>
    </div>
    <div class="right">
        <h3>Contracts</h3>
        <ul *ngIf="false">
            <li *ngFor="let contract of contractInComponent">
                Service: {{ contract.service }} <br>
                Title: {{ contract.title }}
            </li>
        </ul>
        <ul *ngIf="true">
            <li>{{ contractInComponent.length }}</li> <!-- output = 0 -->
        </ul>
    </div>
</div>

get-data.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GetDataService {

  constructor() { }

  getContracts() {
    return [];
  }
}