Question

如何通过对象的值更改＃card10和“ VerBoton10”？

我可以在div文本中执行此操作，但不能在我指示的位置执行。

我想要实现的是在HTML和TypeScript代码中使用通过插值获得的名称，以避免每个元素仅占一行。

感谢您的关注。

您可以看到https://stackblitz.com/edit/angular-skast9

  <div *ngFor="let card of cards"
    [style.background]="'grey'"
    [style.border]="'1px solid red'"
  >
    <div class="card">
      <div #card10 class="overlay">
        <div>Name: {{ card.name }}</div>
        <br />
        <div>ID: {{ card.id}}</div>
        <br />
        <button  *ngIf="verBoton10"
             (click)="onClickHecho( card.id )"
        >
          Hecho {{ card.name }}
        </button>
      </div>
    </div>
  </div>
  <br>
  <button (click)="reponer()" >
          Reponer botones
        </button>

import { Component,
  Renderer2,
  ViewChild,
  ElementRef, } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cards = [
    {name: '#card10', id: 10, boton: 'verBoton10'},
    {name: '#card11', id: 11, boton: 'verBoton11'},
    {name: '#card12', id: 12, boton: 'verBoton12'},
    {name: '#card13', id: 13, boton: 'verBoton13'},
    {name: '#card14', id: 14, boton: 'verBoton14'}
];

@ViewChild('card10', { static: false }) card7: ElementRef;

  verBoton10 = true;
  verBoton11 = true;
  verBoton12 = true;
  verBoton13 = true;
  verBoton14 = true;


constructor(
    private renderer: Renderer2) {
    }

onClickHecho(numCard: number) {
    console.log(numCard);
    switch (numCard) {
      case 10:
       this.verBoton10 = false;
       this.renderer.setStyle( this.card7.nativeElement, 'backgroundColor', 'green' );
       break;
      case 11:
       this.verBoton11 = false;
       break;
      case 12:
       this.verBoton12 = false;
       break;
      case 13:
       this.verBoton13 = false;
       break;
      case 14:
       this.verBoton14 = false;
       break;
    }
  }

  reponer(){
    this.verBoton10 = true;
     this.renderer.setStyle( this.card7.nativeElement, 'backgroundColor', 'grey' );
    this.verBoton11 = true;
    this.verBoton12 = true;
    this.verBoton13 = true;
    this.verBoton14 = true;
  }
}

Answer 1

据我了解，您想通过单击卡号10来控制按钮的激活。另一方面，您只能在html部分中控制卡10的外观。

检查此代码并告诉我： https://stackblitz.com/edit/angular-tluc9y?file=src/app/app.component.html

  <div *ngFor="let card of cards"
    [style.background]="'grey'"
    [style.border]="'1px solid red'"
  >
    <div class="card">
      <div [ngStyle]="!activateButtons && card.id === 10 ? {'background-color':'green'} : {'background-color':'grey'}" class="overlay">
        <div>Name: {{ card.name }}</div>
        <br />
        <div>ID: {{ card.id}}</div>
        <br />
        <button  *ngIf="activateButtons" (click)="onClickHecho(card.id)">
          Hecho {{ card.name }}
        </button>
      </div>
    </div>
  </div>
  <br>
  <button (click)="reponer()" >
    Reponer botones
  </button>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cards = [
    {name: '#card10', id: 10},
    {name: '#card11', id: 11},
    {name: '#card12', id: 12},
    {name: '#card13', id: 13},
    {name: '#card14', id: 14}
];

activateButtons = true;

onClickHecho(numCard: number) {
    if (numCard === 10 ) {
      this.activateButtons = false;
    }
  }

  reponer(){
    this.activateButtons = true;
  }
}

您可以将!activateButtons && card.id === 10提取到另一个变量isGreenCard中，以提高可读性。

Answer 2

出于历史目的，我保留了最后一个答案。

现在，您要使卡变成绿色，并且单击它时里面的按钮会消失。这里是更新的代码：https://stackblitz.com/edit/angular-7xt5gx

有多种方法可以满足此要求。如果服务器中需要激活数据，则必须将其放入模型中，就像{name: string, id: number, activated: boolean}。但是，如果后端不需要此数据，则可以仅将其保留在前端（建议的解决方案）。

  <div *ngFor="let card of cards; let idx=index"
    [style.background]="'grey'"
    [style.border]="'1px solid red'"
  >
    <div class="card">
      <div [ngStyle]="!activeCards[idx] ? {'background-color':'green'} : {'background-color':'grey'}" class="overlay">
        <div>Name: {{ card.name }}</div>
        <br />
        <div>ID: {{ card.id}}</div>
        <br />
        <button  *ngIf="activeCards[idx]" (click)="onClickHecho(idx)">
          Hecho {{ card.name }}
        </button>
      </div>
    </div>
  </div>
  <br>
  <button (click)="reponer()" >
    Reponer botones
  </button>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cards = [];
  activeCards = [];

  constructor() {
    this.cards = [
      {name: '#card10', id: 10},
      {name: '#card11', id: 11},
      {name: '#card12', id: 12},
      {name: '#card13', id: 13},
      {name: '#card14', id: 14}
    ];
    this.activateAll();
  }

  onClickHecho(idex: number) {
    this.activeCards[idex] = false;
  }

  reponer(){
    this.activateAll();
  }

  activateAll() {
    this.activeCards = this.cards.map(() => true);
  }
}

如何使用插值通过代码更改＃

2 个答案: