Question

我必须在视图上切换文本并隐藏我该怎么做？我尝试了很多，但没有工作。我不想为此使用Jquery。我想只用角度。谁能帮我这个？？

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

组件：

view : boolean ;
    view(){
            this.view = !this.view
        }

为此，当我点击查看它将切换表格。然后文本应更改为隐藏。点击隐藏时也一样。

Answer 1

答案最短：

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

Answer 2

你可以这样做。

text: string = "view";

view(){
    this.text = this.text == "view" ? "hide" : "view" 
}

<a (click)="view()"> {{ text }}</a>

以下是plunker

Answer 3

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 {}

PLUNKER LINK - https://plnkr.co/edit/Wt8s8HSraBsnx9PzgDrA?p=preview

如何在角度2中单击更改锚标记文本

3 个答案: