Angular 如何将数组传入组件

如何将数组从模板传递到组件文件。我有一个

if

条件，它取决于循环的索引。请帮我找到正确的方法。像这样的

example.componet.ts文件

export class SomeComponent{

   list_value: Array<any> = [];
   active: boolean;

   getListValue(index: String, data: any) {
       console.log("Test",data[index]);
       list_value[index].active = !list_value[index].active
   }
}

导出类组件{
列表_值：数组=[]；
活动：布尔值；
getListValue（索引：字符串，数据：任意）{
日志（“测试”，数据[索引]）；
列表值[索引]。活动=！列表值[索引]。活动
}
}

如果要传递数组，只需传递列表值即可*ngFor就像一个for循环，它在一个数组上迭代。数据本身可能是一个数组（因为它属于“any”类型）。但您在函数中发送的索引是数据位于列表值[index]中的索引

写入

*ngIf=“data.active”

---

正如链接中所示，您不需要索引。只需编写

data.active=！data.active

如果要传递数组，只需传递列表值即可*ngFor就像一个for循环，它在一个数组上迭代。数据本身可能是一个数组（因为它属于“any”类型）。但您在函数中发送的索引是数据位于列表值[index]中的索引

写入

*ngIf=“data.active”

---

正如链接中所示，您不需要索引。只需编写

data.active=！data.active

将数据传递给组件的一种方法是使用

@input

如下所示：

<ul>
  <li *ngFor="let data of list_value | keyvalue; let i=index;" (click)="getListValue(i,data)">
  <li>
  <ul>
     <li *ngFor="let item of data.value" *ngIf="data[i].active">
      <app-selector *ngSwitchCase="'observations'" [inputdata]=item></app-selector>

     <li>

---

将数据传递到组件的一种方法是使用以下方式的

@input

：

<ul>
  <li *ngFor="let data of list_value | keyvalue; let i=index;" (click)="getListValue(i,data)">
  <li>
  <ul>
     <li *ngFor="let item of data.value" *ngIf="data[i].active">
      <app-selector *ngSwitchCase="'observations'" [inputdata]=item></app-selector>

     <li>

---

希望下面的代码会有帮助

<ul>
  <li *ngFor="let data of list_value;let i=index" (click)="getListValue(i,data)">    
      <span>{{data.name}}</span>
      <ul>

                <li *ngFor="let subItem of data.subItems" [hidden]="!data.active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
  </li> 
</ul>

{{data.name}


---{{subItem.name}

组件ts

   export class SomeComponent{
     list_value: Array<any> = [
            {          
                name: "Item1",
                subItems: [
                    {name: "SubItem1"},
                    {name: "SubItem2"}
                ]
            },
            {
                name: "Item2",            
                subItems: [
                    {name: "SubItem3"},
                    {name: "SubItem4"},
                    {name: "SubItem5"}
                ]
            },
            {
                name: "Item3",
                subItems: [
                    {name: "SubItem6"}
                ]
            }
        ];;   
       getListValue(index: number, data: any) {      
           this.list_value[index].active = !this.list_value[index].active
       }
    }

导出类组件{
列出值：数组
希望下面的代码会有所帮助

<ul>
  <li *ngFor="let data of list_value;let i=index" (click)="getListValue(i,data)">    
      <span>{{data.name}}</span>
      <ul>

                <li *ngFor="let subItem of data.subItems" [hidden]="!data.active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
  </li> 
</ul>



{{data.name}


---{{subItem.name}





组件ts

   export class SomeComponent{
     list_value: Array<any> = [
            {          
                name: "Item1",
                subItems: [
                    {name: "SubItem1"},
                    {name: "SubItem2"}
                ]
            },
            {
                name: "Item2",            
                subItems: [
                    {name: "SubItem3"},
                    {name: "SubItem4"},
                    {name: "SubItem5"}
                ]
            },
            {
                name: "Item3",
                subItems: [
                    {name: "SubItem6"}
                ]
            }
        ];;   
       getListValue(index: number, data: any) {      
           this.list_value[index].active = !this.list_value[index].active
       }
    }

导出类组件{
list_value:Array
对不起，你到底想在这里做什么？我想实现这样的解决方案对不起，你到底想在这里做什么？我想实现这样的解决方案谢谢你的回复。我尝试了你的解决方案，部分有效。唯一的问题是，当我们单击新菜单项时，上一个菜单应该d将被折叠，但这不是hapening…模板分析错误：一个元素上不能有多个模板绑定。在同一行中使用*ngFor和*ngIf时，只能使用一个前缀为*的属性。使用[hidden]='！data.active'代替*ngIfNo我没有理解你..ngif如何确保其他菜单像这样折叠感谢你的回复..我尝试了你的解决方案，部分有效。唯一的问题是，当我们单击新菜单的项时，上一个菜单应该折叠，但这不会出现…模板分析错误：C在一个元素上没有多个模板绑定。在同一行中使用*ngFor和*ngIf时，只使用一个前缀为*的属性。使用[hidden]='！data.active'代替*ngIfNo我没有理解你..ngIf如何确保另一个菜单像这样折叠这是未定义的..this.list\u value[index].active…从何处获取此“活动”值我们在getListValue函数内扩展对象。这是未定义的..this.list_值[index]。active…从何处获取此“活动”值我们在getListValue函数内扩展对象。