检查是否以角度检查复选框

Question

我有一个复选框列表，并且我只想在选中的复选框附近显示某些输入文本。 在 AngularJs 中它非常非常简单。从角度来看，这似乎是不可能的。 我看到这个问题有很多答案，但没有一个有效！ 谁能给我一个简单 工作解决方案？

谢谢， 奥斯纳特。

这是我的代码：

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td" *ngIf="services[i]"><input type="checkbox">
          <span>{{services[i]}}</span>
     </td>
     <input [hidden]="???" type="text" value="wl">
</tr>

Answer 1

它只使用 [(ngModel)] 和一个变量。如果您遍历一个对象数组，只需向您的对象添加一个“已检查”的新属性。你可以让它“飞起来”

想象你的“服务”是一个对象数组

[{name:"Service1",value:"some value"},{name:"service2",value:"some value"}]

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td">
          <input type="checkbox" [(ngModel)]="eachService.checked">
          <span>{{eachService.name}}</span>
     </td>
     <input [hidden]="!eachService.checked" type="text" [(ngModel)]="eachService.Value">
</tr>

好吧，但是你没有一个对象数组，你有一个字符串数组，实际上是两个字符串数组（一个用于显示服务，另一个用于存储值。好吧，创建一个新的布尔数组显示或不显示输入

checks:boolean[]=[]
values:string[]=[]
services:string[]=["service1","service2"]

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td">
          <input type="checkbox" [(ngModel)]="checks[i]">
          <span>{{eachService}}</span>
     </td>
     <input [hidden]="!checks[i]" type="text" [(ngModel)]="values[i]">
</tr>

注意：在这种情况下，不要忘记在发送数据之前检查“检查”是否为真

this.values=this.values.filter((x,index)=>this.checks[index])

Answer 2

您可以执行以下操作，这是一个工作演示：https://stackblitz.com/edit/angular-apfdfa：

component.ts

  selectedValue = '';
  services = ['service 1','service 2', 'service 3'];
  checked($val){
    this.selectedValue = $val;
  }

component.html

<tr *ngFor="let eachService  of services; let i = index">
     <td class="service-td" *ngIf="services[i]">
       <input (change)="checked(eachService)" [checked]="selectedValue == eachService" type="checkbox" [value]="eachService">
          <span>{{eachService}}</span>
     </td>
     <input [hidden]="!(selectedValue === eachService)" type="text" [value]="eachService">
</tr>

Answer 3

我不确定你到底想要什么，但我认为你可能需要这样的东西。

componet.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  services = [{key: "a"},{key: "b"},{key: "c"},{key: "d"}];
}

component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<tr *ngFor="let eachService of services;">
     <td class="service-td">
       <input [(ngModel)]="eachService.checked" type="checkbox" #p > <span>{{eachService.key}}</span>
       <span *ngIf="eachService.checked">
         <input type="text" placeholder="{{eachService.key}} is selected">
       </span>
     </td>
</tr>
<br>
<br>

{{services | json}}

https://stackblitz.com/edit/angular-lr3fat

Answer 4

对于多个checkbox只显示对应的div，可以有多种追踪方式。

一个。跟踪索引并存储在数组中，只显示选中的索引。

b. angular 已经特别提供了@ViewChildren 来跟踪元素。

c。您甚至可以使用键作为 id 和布尔值创建地图以显示或隐藏元素。并且可以使用地图进行切换。

使用@ViewChildren 的示例：-

<tr *ngFor="let eachService of services; let i = index">
                <td class="service-td"><input type="checkbox" 
(change)="toggle($event,i)">  
                     <span>{{services[i]}}</span> 
                </td>
                <input  [id]="i" style="display: none;"   type="text" 
 [value]="services[i]" #help>
           </tr>

ts 文件：-

@ViewChildren('help') help :any[]; // declare it.


toggle(event,j){
this.help.forEach((ele: ElementRef) => {
  if(ele.nativeElement.id == j && event.target.checked){
    ele.nativeElement.style.display='block';                  
  }else if(ele.nativeElement.id == j && !event.target.checked){
    ele.nativeElement.style.display='none';
  } 

});
}