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

在

*ngFor

中呈现

textarea

时，如果取消选中

复选框，如何隐藏
textarea
？所以复选框应该与文本区域绑定，对吗？它应该只隐藏用户未选中的
textarea
，其他人应该保持可见

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

出于某种原因，这个plnkr不允许我使用
[（ngMode）]
我认为它是一个不同的角度RC，但下面的例子基本上是我的问题，当你取消选中框时，它不会隐藏文本区域


我的原始代码：

<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>


{{inputSearch.name}
{{inputSearch.name}-{{inputSearch.value}



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

选中并取消选中复选框

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'}];

  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
风格：[`
.隐藏{
显示：无；
}
`],
模板：`{{user.name}-{{user.age}

{{user.name}

`
})
导出类AppComponent{
公共用户：字符串；
公共chkState=true；
change（）：void{
this.chkState=！this.chkState；
}
构造函数（）{
this.users=[{name:'User1'，age:'21'}，{name:'User2'，age:'31'}]；
}
}

使用一个
checkedUsers
数组，如果在数组中找不到用户，则将复选框设置为选中。然后，如果在数组中找到
用户
，则隐藏
文本区域

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

下面是组件的外观。但是，每个用户上的
名称必须是唯一的，否则将添加某种类型的
id
属性。另外，我在
checkedUsers
数组中使用
JSON.stringify
，并将其放入
localStorage
中，因此如果该值过大，将影响性能，但无论如何都应该使用db

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

}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“我的应用程序”，
风格：[`
.隐藏{
显示：无；
}
`],
模板：`{{user.name}-{{user.age}

{{user.name}

`
})
导出类AppComponent实现OnInit{
公共用户：字符串；
公开检查用户=[]；
构造函数（）{
}
恩戈尼尼特（）{
this.users=[{name:'User1'，age:'21'}，{name:'User2'，age:'31'}]；
this.checkedUsers=JSON.parse（localStorage.getItem（“checkedUsers”）；
if（this.checkedUsers===null）{
this.checkedUsers=[]；
}否则{
对于（var i=0；i=0）{
此.检查用户.拼接（indexOfItem，1）；
}否则{
this.checkedUsers.push（用户）；
}
setItem（“checkedUsers”，JSON.stringify（this.checkedUsers））；
}
}
这个想法只是隐藏您未选中的文本区域，我想这就是为什么我尝试使用
user.name
作为
ngModel
，因为每个用户都有唯一的名称，但是plnkr不允许我使用
[（ngModel）]
您能举个例子说明我还能如何实现它吗？因此，它将只隐藏用户未选中的文本区域。这是隐藏并显示所有文本区域，它只想隐藏我未选中的文本区域。因此，如果我未选中
User1
，它应该隐藏相对于
User1
的文本区域。是的，但这正好相反。假设文本区域默认为
true
，因此所有内容都是可见的，那么如果我未选中
User1
，则应该隐藏但
User2
应该保持可见，如果两者都未选中，则如果两者都选中，则两者都应该隐藏或可见。@n若要确定，请检查对帖子和更新的plunker所做的编辑。我使用一个选中的
用户数组
，如果他们选中该复选框，我将
用户
推入数组，然后在
文本区域
上，如果在数组中找到
用户
，则它是
隐藏的
！非常感谢。如果你在附近，我就请你喝杯啤酒。哈哈，谢谢你的提议，但是投票结果和接受的答案都很好！我很乐意帮忙！假设
名称
是唯一的，因为没有其他唯一标识符。我已经更新了PLUNKER和post以使用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));
  }

}