时间戳

首页 > 解决方案 > AppComponent 类型上不存在 Angular 8 属性

javascript - AppComponent 类型上不存在 Angular 8 属性

问题描述

我创建了一个小应用程序，Angular 8它只是一个带有 2 个选择器的应用程序。但它Property 'DepScreen' does not exist on type 'AppComponent'在编译时抛出错误。

请在下面详细查找错误。

ERROR in src/app/app.component.html:10:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'.

10         (click) = "DepScreen=true; EmpScreen=false;">
                      ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
src/app/app.component.html:10:36 - error TS2339: Property 'EmpScreen' does not exist on type 'AppComponent'.

10         (click) = "DepScreen=true; EmpScreen=false;">
                                      ~~~~~~~~~

请在下面找到 index.html 代码

  <nav class="navbar navbar-expand-sm bg-light navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "DepScreen"
        (click) = "DepScreen=true; EmpScreen=false;">
        Departments
      </button>
      </li>
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "EmpScreen"
        (click) = "DepScreen=false; EmpScreen=true;">
        Employees
      </button>
      </li>
    </ul>
  </nav>

  <app-department *ngIf="DepScreen"></app-department>
  <app-employee *ngIf="EmpScreen"></app-employee>

请找到我的 app.component.ts 文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

标签： javascriptangulartypescriptangular8

解决方案

索引.html

  <nav class="navbar navbar-expand-sm bg-light navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "DepScreen"
        (click) = "onScreenSelect()">
        Departments
      </button>
      </li>
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "EmpScreen"
        (click) = "onScreenSelect()">
        Employees
      </button>
      </li>
    </ul>
  </nav>

现在，在你的 app.component.ts

export class AppComponent {
  title = 'Hello World';
  DepScreen = true;  // put the default values 
  EmpScreen = false;

  onScreenSelect(){
     this.DepScreen = !this.DepScreen; // at any point in time only one screen is visible
     this.EmpScreen = !this.EmpScreen;
  }

}

推荐阅读