Есть ли способ привязать имя функции из данных JSON к (нажатию) кнопки в угловой - PullRequest
1 голос
/ 29 октября 2019

Привет! Я хочу назначить имя метода динамически и использовать их. Пожалуйста, помогите. Я пытаюсь что-то вроде следующего.

<div class="dashboard row">
<div class="card col-lg-3" *ngFor="let card of cards">
    <h5 class="card-title">{{card.title}}</h5>
    <div class="card-body">
        <ul style="list-style-type:none;">
            <li *ngFor="let cardFeature of cardFeatures" style="padding-left: 7px;">
                <a href="" *ngIf="cardFeature.enable" [routerLink]="cardFeature.link">{{cardFeature.title}}</a>
                <button (click)="[cardFeature.method]">{{cardFeature.method}}</button>
            </li>
        </ul>
    </div>
</div>

CardFeatures - это массив, в котором я определяю данные JSON, и там я определяю имя моего метода, чтобы я мог динамически читать вызов этого. Но я не могу достичь цели. Пожалуйста, помогите решить то же самое. Это то, что у меня есть в моем файле TS

cardFeatures = [
{
    "name": "id",
    "title": "ID",
    "enable": true,
    "link": "/register",
    "method": "meth1()"
},
{
    "name": "profile",
    "title": "profile",
    "enable": true,
    "link": "/link1",
    "method": "meth2()"
}
]

cards = [
{
  title: "Card1"
},
{
  title: "Card2"
}]

1 Ответ

1 голос
/ 29 октября 2019

Попробуйте так:

Рабочая демоверсия

 cardFeatures = [
    {
      name: "id",
      title: "ID",
      enable: true,
      link: "/register",
      method: () => this.meth1()
    },
    {
      name: "profile",
      title: "profile",
      enable: true,
      link: "/link1",
      method: () => this.meth2()
    }
  ];

Шаблон:

<div class="card-body">
    <ul style="list-style-type:none;">
        <li *ngFor="let cardFeature of cardFeatures" style="padding-left: 7px;">
            <a href="" *ngIf="cardFeature.enable" [routerLink]="cardFeature.link">{{cardFeature.title}}</a>
            <button (click)="cardFeature.method()">Test</button>
        </li>
    </ul>
</div>

РЕДАКТИРОВАТЬ:

Согласно вашему комментарию, вы также можете попробовать это решение

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...