如何使用插值通过代码更改# [英] How can I change # by code using interpolation

问题描述

如何通过对象的值更改#card10和"VerBoton10"?

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

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

感谢您的关注.

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

 < div * ngFor =让卡片卡"[style.background] ='灰色'"[style.border] ='1px纯红色'">< div class ="card">< div#card10 class ="overlay">< div>名称:{{card.name}}</div>< br/>< div> ID:{{card.id}}</div>< br/>< button * ngIf ="verBoton10"(click)="onClickHecho(card.id)">赫乔{{card.name}}</button></div></div></div>< br>< button(click)="reponer()">应答器botones</button>  

  import {组件，渲染器2ViewChild，ElementRef，}来自"@ angular/core"；@零件({选择器:"my-app"，templateUrl:"./app.component.html"，styleUrls:['./app.component.css']})导出类AppComponent {卡= [{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;构造函数(私人渲染器:Renderer2){}onClickHecho(numCard:number){console.log(numCard);开关(numCard){情况10:this.verBoton10 = false;this.renderer.setStyle(this.card7.nativeElement，'backgroundColor'，'green');休息;情况11:this.verBoton11 = false;休息;情况12:this.verBoton12 = false;休息;案例13:this.verBoton13 = false;休息;情况14:this.verBoton14 = false;休息;}}reponer(){this.verBoton10 = true;this.renderer.setStyle(this.card7.nativeElement，'backgroundColor'，'grey');this.verBoton11 = true;this.verBoton12 = true;this.verBoton13 = true;this.verBoton14 = true;}}  

解决方案

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

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

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

 <代码>< div * ngFor =让卡牌放开；让idx = index"[style.background] ='灰色'"[style.border] ='1px纯红色'">< div class ="card">< div [ngStyle] =！activeCards [idx]?{'background-color':'green'}:{'background-color':'grey'}" class ="overlay">< div>名称:{{card.name}}</div>< br/>< div> ID:{{card.id}}</div>< br/>< button * ngIf ="activeCards [idx]"(click)="onClickHecho(idx)">赫乔{{card.name}}</button></div></div></div>< br>< button(click)="reponer()">应答器botones</button> 

 从'@ angular/core'导入{Component，ViewChild};@零件({选择器:"my-app"，templateUrl:"./app.component.html"，styleUrls:['./app.component.css']})导出类AppComponent {卡= []；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);}} 

How can I change #card10 and "VerBoton10" by values ​​of the object?

I can do it in the div texts but not in the places I indicate.

What I want to achieve is to use the names obtained by interpolation in both the HTML and TypeScript codes to avoid having one line per element.

Thank you for your attention.

You can see the 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;
  }
}

解决方案

I've kept the last answer for historical purposes.

Now what you want is to make the card green and the button inside disappear when you click on it. Here the updated code: https://stackblitz.com/edit/angular-7xt5gx

There's multiple way to achieve this requirement. If the activation data is needed in the server you have to put it in the model, it'll be like {name: string, id: number, activated: boolean}. But if this data is not needed at the backend you can keep it only in the front (the suggested solution).

  <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);
  }
}

这篇关于如何使用插值通过代码更改#的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！