Angular 2隐藏用户未选中的文本区域

Question

当textarea 在*ngFor 中呈现时，当我取消选中checkbox 时，如何隐藏textarea？所以复选框应该与文本区域绑定，对吧？它应该只隐藏用户未选中的textarea，而其他人应该保持可见。

我一直在尝试找出最简单的方法，尽管在我的实际代码中，如果勾选了框，则返回我true，如果没有，则返回false，但是它没有隐藏textarea全部。默认值为 true，因此它将所有文本区域显示为默认值。

由于某种原因，这个 plnkr 不允许我使用 [(ngMode)] 我认为它是一个不同的 RC 角度，但下面的示例基本上是我在取消选中它不隐藏文本区域的框时遇到的问题。

http://plnkr.co/edit/tOdtcmWxFB6vGuLyCqZS?p=preview

我的原始代码：

<label for="inputSearch.name" style="float: left;">
    <input  type="checkbox" id="{{inputSearch.name}}" [checked]="chkProp" (click)="chkboxCookie()" [(ngModel)]="inputSearch.value"> {{inputSearch.name}}
 </label>

<div class="" *ngFor="let inputSearch of searchBoxCount" class="col-sm-12">
    <textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="3" class="search-area-txt" attr.placeholder="Search {{inputSearch.name}}"  [(ngModel)]="inputSearch.value" *ngIf="chkProp || chkProp==true || inputSearch.name"></textarea>
    <p> {{inputSearch.name}} - {{inputSearch.value}}</p>
</div>

Answer 1

使用checkedUsers 的数组，并设置复选框以选中是否在数组中找到用户ISN'T。然后，如果在数组中找到user IS，则隐藏textarea。

然后，在复选框 change 上将 user 传递给更改，如果用户不在 checkedUsers 的数组中，则添加用户，如果他们已经在其中，则将其删除。

PLUNKER

这是您的组件的外观。但是有一些警告，每个用户上的name 必须是唯一的，或者向他们添加某种id 属性。另外，我在checkedUsers 数组上使用JSON.stringify 并将其放在localStorage 中，所以如果它变得很大会影响性能，但无论如何你应该使用数据库。

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

@Component({
  selector: 'my-app',
    styles: [`
    .hidden {
      display: none;
    }
    `],
  template: `<p *ngFor="let user of users">{{ user.name }} - {{ user.age }} </p>

   <div *ngFor="let user of users">
      <textarea name="{{user.name}}" id="{{ user.name }}" [class.hidden]="checkedUsers.indexOf(user) >= 0"></textarea>
      <input type="checkbox" id="{{ user.name }}" [checked]="checkedUsers.indexOf(user) < 0" (click)="change(user)"/>
      <p>{{user.name}}</p>
   </div>

  `
})
export class AppComponent implements OnInit { 
  public users: string;
  public checkedUsers = [];

  constructor() {

  }

  ngOnInit() {
    this.users = [{name: 'User1', age: '21'}, {name:'User2', age:'31'}];
    this.checkedUsers = JSON.parse(localStorage.getItem("checkedUsers"));

    if(this.checkedUsers === null) {
      this.checkedUsers = [];
    } else {
      for(var i = 0; i < this.checkedUsers.length; i++) {
        var currCheckedUser = this.checkedUsers[i];
        for(var x = 0 ; x < this.users.length ; x++) {
          var currUser = this.users[x];
          if(currCheckedUser.name === currUser.name) {
            this.checkedUsers.splice(i, 1);
            this.checkedUsers.push(currUser);
          }
        }
      }
    }
  }

  change(user): void {
    var indexOfItem = this.checkedUsers.indexOf(user);
    if(indexOfItem >= 0) {
      this.checkedUsers.splice(indexOfItem, 1);
    } else {
      this.checkedUsers.push(user);
    }
    localStorage.setItem("checkedUsers",  JSON.stringify(this.checkedUsers));
  }

}

Answer 2

<input type="checkbox" id="{{ user.name }}" [checked]="chkState" (change)="chkState = !chkState" />

但是，您将遇到一个问题，它会隐藏您的所有文本区域。你需要使用一些独特的东西来保存它们各自的状态。

Answer 3

试试这个代码，它会为你工作。

选中和取消选中复选框。

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

@Component({
  selector: 'my-app',
    styles: [`
    .hidden {
      display: none;
    }
    `],
  template: `<p *ngFor="let user of users">{{ user.name }} - {{ user.age }} </p>

   <div *ngFor="let user of users">
      <textarea name="{{user.name}}" id="{{ user.name }}" [class.hidden]="chkState"> </textarea>
      <input type="checkbox" id="{{ user.name }}" [checked]="chkState" (click)="change()"/>
      <p>{{user.name}}</p>
   </div>

  `
})
export class AppComponent { 
  public users: string;
  public chkState = true;
  change(): void {
    this.chkState = !this.chkState;
  }
  constructor() {
    this.users = [{name: 'User1', age: '21'}, {name:'User2', age:'31'}];

  }
}

Here is the plunker