WebStorm中未解决的变量，Angular 4

Question

所以我有一个HTML模板，我在其中引用一个服务，在构造函数中定义，WebStorm向我发送有关未解析变量的警告，尽管我指向的变量是通过导入定义并链接到服务的。

以下是模板：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a routerLink="/" class="navbar-brand">Recipe Book</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li routerLinkActive="active"><a routerLink="/recipes">Recipies</a></li>
            <li routerLinkActive="active"><a routerLink="/shopping-list" >Shopping List</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
      <ng-template **[ngIf]="!authService.isAuthenticated()**">
        <li><a routerLink="/signup">Register</a></li>
        <li><a routerLink="/signin">LogIn</a></li>
      </ng-template>
            <li class="dropdown" app-dropdown>
                <a style="cursor: pointer" class="dropdown-toggle" role="button" *ngIf="authService.isAuthenticated()">Manage <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a style="cursor: pointer" (click)="OnSave()">Save Data</a></li>
                    <li><a style="cursor: pointer" (click)="OnGet()">Fetch Data</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

这是TypeScript代码：

import {Component} from '@angular/core';
import { Response } from '@angular/http';
import {RecipeDataService} from '../shared/RecipeData.service';
import {SignupUserService} from '../auth/signupUser.service';


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  constructor(private RecipeDataService: RecipeDataService,
              **private authService: SignupUserService**) { }
  OnSave()
  {
    this.RecipeDataService.OnSaveRecipe()
      .subscribe(
        (response: Response) =>
        {
          console.log(response);
        }
      );
  }
  OnGet()
  {
    this.RecipeDataService.OnGettingRecipe();
  }
}

以及服务的内容：

import {Injectable} from '@angular/core';
import * as firebase from 'firebase';


@Injectable()

export class SignupUserService {
  token = '';
  signUpUser(email: string, password: string) {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(
        error => console.log(error)
      );
  }
  signInUser(email: string, password: string)
  {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(
        response => {
          firebase.auth().currentUser.getIdToken()
            .then(
              (token: string) => this.token = token
            );
        }
        )
      .catch (
        error => {console.log(error); }
      );
  }
  getToken() {
    firebase.auth().currentUser.getIdToken()
      .then(
        (token: string) => this.token = token
      );
    return this.token;
  }
  isAuthenticated(): 
  {
    return this.token != null;
  }
}