textarea 中的对象条件样式数组。角 6答案

【问题标题】：Array of Objects conditional style in textarea. Angular 6textarea 中的对象条件样式数组。角 6
【发布时间】：2019-05-07 02:13:52
【问题描述】：

我有一个这样的对象数组：

   list =[  
   {  
      name:"name1",
      value:true
   }   {  
      name:"name2",
      value:false
   }   {  
      name:"name3",
      value:true
   }   {  
      name:"name4",
      value:false
   }
]

我想要做的是在文本区域内显示所有对象名称，如果 object.value 为假，则下划线或粗体。然后为了能够在文本区域里面写字去掉下划线的元素。

我尝试的是：

<textarea *ngFor="let item of list" [ngClass]="{cssClass: item.value==false}">
{{item.name}}
</textarea>

-这里的问题是它为每个对象显示一个空的文本区域和

<div *ngFor="let item of list" [ngClass]="{cssClass: item.value==false}">
<textarea>
{{item.name}}
</textarea>
</div>

这里的问题是它每行创建一个文本区域，该行在里面。

【问题讨论】：

试试这个<textarea><p *ngFor="let item of list" [ngClass]="{cssClass: item.value==false}"> {{item.name}}</p> </textarea>
你可以使用[class.cssClass]="item.value==false"
你也可以试试[ngClass]="{'cssClass': item.value==false}"或者直接设置true或者false来确认代码[ngClass]="{'cssClass': true}"的工作

标签： javascript html css angular web

【解决方案1】：

你有字符串值而不是布尔类型。所以你应该使用字符串值'true' 或'false' 而不是true 和false。

<textarea *ngFor="let item of list" [ngClass]="{cssClass: item.value=='false'}">

或

如果您可以选择修改对象，则将值类型更改为 -

  list =[  
   {  
      name:"name1",
      value:true
   }   {  
      name:"name2",
      value:false
   }   {  
      name:"name3",
      value:true
   }   {  
      name:"name4",
      value:false
   }
]

【讨论】：

谢谢，但这不是问题所在。问题在于循环显示仅在一个文本区域中的所有行。有了那个 ngFor，我得到的是每行一个文本区域。
在这种情况下，您应该遍历 ts 文件中的数组并获取完整的附加文本并在 textarea 中显示该附加文本。请注意，文本区域内的内容不能下划线和加粗。