Question

感谢您的帮助，我知道这可能是一个新问题...但我看不出我错过了什么，我的TypeScript中没有编译问题。

我正在尝试做一些非常简单的事情，我希望有一个变量告诉我选择了哪些主菜单项。

所以我用几个变量绑定了我的HTML :(如果你知道如何直接绑定枚举值我会很感激）。

<div id ="menu_popular" class="{{menuClass}}" style=" left:90px; top:368px;">
  Menu Item
</div>

然后我想通过调用函数selectMenu来更新我的代码声明：

import {Component} from '@angular/core';
import {MainMenuItem} from './domain';

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

}

let selectedItem: any = MainMenuItem.POPULAR;

const selectMenu = function (item: MainMenuItem) {
  console.log ('Switching Selected Menu from: ' + selectedItem + ' to: ' + item);
  selectedItem = item;
  console.log('Asigned');
  console.log(this.AppComponent.menuClass);
  if (item === MainMenuItem.YEIIIII)
  {
 ...
 selectMenu (MainMenuItem.YEIIIII);

但是我会发送一个运行时错误，说明无法读取未定义的属性'AppComponent'

似乎我无法以任何方式达到AppComponent值

console.log(this.AppComponent.menuClass);

或

console.log(this.menuClass);

我做错了什么：（

谢谢！

Answer 1

我假设你有多个可以选择的menuItems。一个简单的解决方案是将所有menuItem存储在.ts文件的数组中。

menuItem:string[] = ['item1', 'item2', 'etc'];
selectedItem: number = 0;
menuClass = 'div.menu_text';

然后在您的html文件中，您可以像这样显示它们。

<div
    *ngFor="let item of menuItem; let i=index"
    (click)="selectedItem = i"
    [ngClass]="selectedItem==i ? menuClass:''">{{item}}
</div>

html的作用是循环遍历menuItem数组并填充视图。在这种情况下，它将填充3个div。这是由let item of menuItem完成的。正如您所看到的，我们不只是循环，我们还在for-Loop中声明了一个索引变量。生成到视图的每个menuItem也包含click事件。 OnClick我们将selectedItem设置为索引值。最后但并非最不重要的是，我们有[ngClass]这是angular directive，它允许我们在条件上添加类。 selectedItem==i ? menuClass:''。如果selectedItem等于menuItem div的索引，我们添加 menuClass ，它在.ts else＆＃39;中声明。＆＃39 ;.

希望这能让您了解如何做到这一点。这可能不是解决问题的最佳方法，但可能会对您有所帮助。

Answer 2

如果你想让组件成为自我，请不要设置this。你的函数范围是你的const范围，如果设置arrorw function你会得到windows scope（如golbal）

<强>码

export class AppComponent implements AfterContentInit{

  constructor(
    private elementRef:ElementRef
  ) { }

  title = 'Angular App';
  menuClass = 'div.menu_text';
  public selectedItem: any = MainMenuItem.POPULAR;

  ngAfterContentInit(){
    this.selectMenu (MainMenuItem.YEIIIII);
  }

  selectMenu(item: MainMenuItem) {
    console.log('Switching Selected Menu from: ' + this.selectedItem + ' to: ' + item);
    this.selectedItem = item;
    console.log('Asigned');
    console.log(this.menuClass);
    if (item === MainMenuItem.YEIIIII) { }
  }

}

Angular 4无法从app组件中读取属性变量

2 个答案: