Question

我正在尝试使用[suiCollapse]绑定切换以显示内容。问题是我绑定他们的方式现在他们都有相同的名字，因此当我点击图标时他们都打开。

我尝试使用索引作为修饰符，但它不起作用。例： (click) = "collapse+{{index}} = !collapse+{{index}}"

<div *ngFor="let item of[0,1,2,3,4,5,6,7] let i=index" class="ui segment">
 <div class="ui grid middle aligned">
   <div (click)="collapse = !collapse" class="one wide column center aligned">
    <i class="blue large toggle down icon"></i>
  </div>

 <div [suiCollapse]="!collapse" class="ui grid center aligned">
  <div class="column">
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>  
  </div>
</div>

任何帮助表示赞赏。我试图只使用模板来做这个总线，但如果不可能，我可以在组件内部放置一些逻辑。

Answer 1

*ngFor="let item of[0,1,2,3,4,5,6,7] let i=index"

当数组由索引构成时，为什么要使用索引？

您似乎无法理解Angular语法：编写输入/输出（例如(click)或[myVar]）将将此属性的内容评估为JS 。

所以，如果你写

(click) = "collapse+{{index}} = !collapse+{{index}}"

Angular会尝试这样做：

collapse+{{index}} = !collapse+{{index}}

那不是Javascript。

如果你想让它起作用，那就是：

<div *ngFor="let item of [0,1,2,3,4,5,6,7]" class="ui segment">
 <div class="ui grid middle aligned">
   <div (click)="collapse[item] = !collapse[item]" class="one wide column center aligned">
    <i class="blue large toggle down icon"></i>
  </div>

 <div [suiCollapse]="!collapse[item]" class="ui grid center aligned">
  <div class="column">
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>  
  </div>
</div>

请记住将变量collapse声明为布尔值的数组/对象！

ngFor中的动态属性绑定

1 个答案: