Angular 如何在“角度2”中单击时更改定位标记文本

我必须在视图中切换文本并隐藏我该怎么做？我试了很多，但都没用。我不想为此使用Jquery。我只想使用角度。有人能帮我吗

<a  class="history-link view-history-class" id="show-view-address" (click)="view()" >View</a>

为此，当我单击“查看”时，它将切换表。然后文本应更改为隐藏。单击“隐藏”时也是如此

最短答案：

 <a  class="history-link view-history-class" id="show-view-address" (click)="view()">{{view ? 'View'  : 'Hide' }}</a>

{{view？'view'：'Hide'}

最短答案：

 <a  class="history-link view-history-class" id="show-view-address" (click)="view()">{{view ? 'View'  : 'Hide' }}</a>

{{view？'view'：'Hide'}

您可以这样做

text:string=“view”；
视图（）{
this.text=this.text==“查看”？“隐藏”：“查看”
}

{{text}

您可以这样做

text:string=“view”；
视图（）{
this.text=this.text==“查看”？“隐藏”：“查看”
}

{{text}

从'@angular/core'导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
value=“查看”；
toogle=true；
on（val:boolean）{
//不是这个
this.value=（！this.toogle）？“视图”：“隐藏”；
this.toogle=！this.toogle；
//还是这个
this.value=（this.value==“视图”）？“隐藏”：“视图”//并删除toogle
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

PLUNKER链接-

从“@angular/core”导入{组件，NgModule，版本}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
value=“查看”；
toogle=true；
on（val:boolean）{
//不是这个
this.value=（！this.toogle）？“视图”：“隐藏”；
this.toogle=！this.toogle；
//还是这个
this.value=（this.value==“视图”）？“隐藏”：“视图”//并删除toogle
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

---

PLUNKER链接-

请显示您迄今为止的尝试添加一些代码，以便我们可以看到您尝试切换的文本！我已经添加了代码。请检查。将锚定标记文本

视图

更改为

隐藏

。嘿，伙计们，它正在工作。谢谢你的帮助。我还有一个问题。我有一个复选框。当我检查它时，我正在切换的表数据应该只显示活动记录并隐藏非活动记录。有人能帮我吗。这将是非常感谢。请显示您已经尝试了这么多添加一些代码，这样我们就可以看到什么文本您试图切换！我已经添加了代码。请检查。将锚定标记文本

视图

更改为

隐藏

。嘿，伙计们，它正在工作。谢谢你的帮助。我还有一个问题。我有一个复选框。当我检查它时，我正在切换的表数据应该只显示活动记录并隐藏非活动记录。有人能帮我吗。非常感谢。

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <a href = "#" (click) = "on()">{{value}}</a>
    </div>
  `,
})
export class App {

  value  = "View";
  toogle = true;

  on(val:boolean){
    //either this
    this.value = (!this.toogle)?"View":"Hide";
    this.toogle = !this.toogle;

    //or this
    this.value = (this.value == "View")?"Hide":"View"; // and remove toogle
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}