点击

Question

如何在点击同一按钮时更改按钮标签名称？如果按钮名称在点击时可见，它应该变为不可见，如果点击不可见，它应该变为可见

company.html

＆＃13;

＆＃13;

<div>
  <table class="table">
    <thead>
      <th>Company Name</th>
      <th>App Visibility</th>
    </thead>
    <tbody>
      <tr *ngFor="let company of companies">
        <td>{{company.name}}</td>
        <td *ngIf="company.visiblity == 'Invisible'" >
          <button class="invisible" (click)="checkVisible(company)">{{company.visiblity}}</button>
        </td>
        <td *ngIf="company.visiblity == 'Visible'" >
          <button  class="visible" >{{ company.visiblity}} </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

company.component.ts

＆＃13;

＆＃13;

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

@Component({
  selector: 'app-company',
  templateUrl: './company.html'
})
export class CompanyComponent implements OnInit {

  constructor() {}
  public companies: Array<any>;
  public status: boolean;

  ngOnInit() { 
  	this.companies = [{"name":"Bombardier", "visiblity":"Invisible" },
{"name":"Honda Marine", "visiblity":"Visible" }];
  }

  checkVisible(company){
  	if(company.visiblity == 'visible'){
  		company.visiblity = 'invisible';
  		console.log(company.visiblity);
  	}
  	if(company.visiblity == 'invisible'){
  		company.visiblity = 'visible';
  		console.log(company.visiblity);
  	}
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码中的问题是区分大小写

将组件中的'visible'更改为'Visible'，将'invisible'更改为'Invisible'。

建议您可以通过更改代码来实现相同的目标

来自：

<td *ngIf="company.visiblity == 'Invisible'" >
    <button class="invisible" (click)="checkVisible(company)">{{company.visiblity}}</button>
</td>
<td *ngIf="company.visiblity == 'Visible'" >
    <button  class="visible" >{{ company.visiblity}} </button>
</td>

收件人：

<td>
    <button  [ngClass]="{'visible': company.visiblity == 'Visible' }"  
            (click)="company.visiblity == 'Invisible' ? checkVisible(company) : false ">
            {{ company.visiblity}} 
    </button>
</td>

Answer 2

我真的没有得到你想要的东西。但根据标题，您要在单击时更改按钮的文本。这是一个例子。

var btn = document.getElementById('btn');
var visible = true;

btn.onmousedown = function(){
	if(visible){
  	btn.innerHTML = "Button";
    visible = false;
  }else{
  	btn.innerHTML = "";
    visible = true;
  }
}

<button id="btn">Button</button>

Answer 3

<td>
   <button  class="visible" (click)="clickFunc(company)">{{ company.visibility }} </button>
</td>

...

clickFunc(company): void {
   if(company.visiblity == 'visible'){
    company.visiblity = 'invisible';
  }
  if(company.visiblity == 'invisible'){
    company.visiblity = 'visible';
  }
}

Answer 4

如果我正确理解了您的问题 - 您正试图在点击按钮上更改文字。

我认为您的问题是您正在更新对象引用而不是正在渲染的数组中的对象。

用 * ng 替换你的两个 td

<强> HTML

   <button class="invisible" (click)="toggleVisibility(company.name)">
      {{company.visiblity}}
   </button>

<强> TS

// Pass any unique field here to get required company
toggleVisibility(name: string) { 
  let company = this.companies.find(x => x.name === name);
  company.visibility = (company.visibility === 'visible') ? 'invisible' : 'visible';
}

您传入公司的唯一标识符（Id，Name - 如果这是唯一的），您可以在数组中找到该对象并更新'visibility'的值。

希望这有帮助，

如果有任何问题，请告诉我们，以便我们根据您的需求进行更新。