如何使用动态数据创建动态按钮,并在按钮上单击角度获取动态值

时间:2018-03-31 03:21:02

标签: javascript angular typescript

这里我从服务器

获得动态数据
{
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "lat":"25.6599899",
            "lng":"45.3664646",
            "status":"0"

        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "lat":"25.99899",
            "lng":"45.4646",
             "status":"1"

        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "lat":"25.2339899",
            "lng":"45.56664646",
            "status":"1"

        }
    ]
}

这里是如何根据状态值创建动态按钮,假设如果status = 1有3个成员的值,那么必须使用特定的名称和ID创建3个按钮,并且当用户单击任何特定的人和按钮时名称必须在警报

上显示

1 个答案:

答案 0 :(得分:3)

据了解,您需要每个状态= 1的按钮,然后点击需要显示人名。

ts代码

可变

public dynamicData = {
"data": [
  {
    "id": 4,
    "first_name": "Eve",
    "last_name": "Holt",
    "lat": "25.6599899",
    "lng": "45.3664646",
    "status": "0"

  },
  {
    "id": 5,
    "first_name": "Charles",
    "last_name": "Morris",
    "lat": "25.99899",
    "lng": "45.4646",
    "status": "1"

  },
  {
    "id": 6,
    "first_name": "Tracey",
    "last_name": "Ramos",
    "lat": "25.2339899",
    "lng": "45.56664646",
    "status": "1"

  }
]
};

方法

onButtonClick(data: any): void {
   alert(data.first_name + ' status is ' + data.status);
}

HTML代码

  <ng-container *ngFor="let data of dynamicData.data">
     <button [id]="data.id" class="btn btn-primary" (click)="onButtonClick(data)">
        {{data.first_name}}
     </button>
  </ng-container>