Как установить динамическое значение для кнопки из массива в Angular2 - PullRequest
Новая
       10

Как установить динамическое значение для кнопки из массива в Angular2

0 голосов
/ 13 мая 2019

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

Итак, я передаю каждую запись идентификатора для просмотра, и когда я перебираю кнопку редактирования, она отображает номер кнопки, а не одну кнопку.

Здесь я предоставляю код component.html 

 <table class="table table-bordered table-hover" style="width:100%" border="1">
    <thead class="thead" style="background-color:#3f51b5; color:white;">
      <tr>
        <th *ngFor="let label of model.label">
          {{label}}
        </th>

        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let key of model.TemplateJson">
        <td scope="row" *ngFor="let k of key">{{k.value}}</td>
        <th *ngFor="let btn of model.Id">
            <button mat-raised-button   style="width:100%; background-color:#3f51b5; color:white;" [routerLink]="['/formBuilder', {edit: btn}]">Edit</button>
        </th>
      </tr>
    </tbody>
  </table>

В модели. Я получаю список идентификаторов, поэтому я получаю столько кнопок.

Здесь я включаю изображение для ясной идеи. enter image description here

Редактировать

объект Json 

[  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"1234"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Jerry",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Foster",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"X",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-04-30"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"2345"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Jeffrey",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Tucker",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"X",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-05-01"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"3456"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Anne",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Cloyd",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"XI",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-05-03"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"4567"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Kristina",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Baker",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"XI",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-05-05"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"number",
      "label":"GR No",
      "className":"form-control",
      "name":"number-1557737728450",
      "value":"56789"
   },
   {  
      "type":"text",
      "label":"FirstName",
      "className":"form-control",
      "name":"text-1554701360234",
      "value":"Christopher",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"LastName",
      "className":"form-control",
      "name":"text-1554701374890",
      "value":"Smith",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Class",
      "className":"form-control",
      "name":"text-1557737708598",
      "value":"XII",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date of Birth",
      "className":"form-control",
      "name":"date-1554701421490",
      "value":"2019-04-29"
   },
   {  
      "type":"text",
      "label":"Comment",
      "className":"form-control",
      "name":"text-1557396998516",
      "value":"New Admission",
      "subtype":"text"
   }
][  
   {  
      "type":"text",
      "label":"Name",
      "name":"text - 1554220470561",
      "value":"Marilyn",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557726629007",
      "value":"marilyn@gmail.com",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"PhoneNumber",
      "className":"form-control",
      "name":"text-1557738193617",
      "value":"9898989898",
      "subtype":"text"
   },
   {  
      "type":"textarea",
      "label":"Message",
      "className":"form-control",
      "name":"textarea-1557738218005",
      "value":"We had issue regarding our existing website. Please help us.",
      "subtype":"textarea"
   }
][  
   {  
      "type":"text",
      "label":"Name",
      "name":"text - 1554220470561",
      "value":"Elizabeth",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557726629007",
      "value":"elizabeth@gmail.com",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"PhoneNumber",
      "className":"form-control",
      "name":"text-1557738193617",
      "value":"9898989898",
      "subtype":"text"
   },
   {  
      "type":"textarea",
      "label":"Message",
      "className":"form-control",
      "name":"textarea-1557738218005",
      "value":"I have placed wrong order and i want to cancel this my order. ",
      "subtype":"textarea"
   }
][  
   {  
      "type":"text",
      "label":"Name",
      "name":"text - 1554220470561",
      "value":"Carmelita",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557726629007",
      "value":"carmelita@gmail.com",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"PhoneNumber",
      "className":"form-control",
      "name":"text-1557738193617",
      "value":"9898989898",
      "subtype":"text"
   },
   {  
      "type":"textarea",
      "label":"Message",
      "className":"form-control",
      "name":"textarea-1557738218005",
      "value":"My website crash when place order",
      "subtype":"textarea"
   }
][  
   {  
      "type":"text",
      "label":"Patient FirstName",
      "className":"form-control",
      "name":"text-1555049946945",
      "value":"Richard",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Patient LastName",
      "className":"form-control",
      "name":"text-1555049947305",
      "value":"Brown",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557740025898",
      "value":"richard@gmail.com",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Blood Group",
      "className":"form-control",
      "name":"text-1555049953585",
      "value":"B+",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date Of Birth",
      "className":"form-control",
      "name":"date-1555049951249",
      "value":"2019-02-06"
   }
][  
   {  
      "type":"text",
      "label":"Patient FirstName",
      "className":"form-control",
      "name":"text-1555049946945",
      "value":"Paul",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Patient LastName",
      "className":"form-control",
      "name":"text-1555049947305",
      "value":"Stein",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557740025898",
      "value":"paul@gmail.com",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Blood Group",
      "className":"form-control",
      "name":"text-1555049953585",
      "value":"O+",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date Of Birth",
      "className":"form-control",
      "name":"date-1555049951249",
      "value":"2019-02-20"
   }
][  
   {  
      "type":"text",
      "label":"Patient FirstName",
      "className":"form-control",
      "name":"text-1555049946945",
      "value":"Levi",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Patient LastName",
      "className":"form-control",
      "name":"text-1555049947305",
      "value":"Stjohn",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Email",
      "className":"form-control",
      "name":"text-1557740025898",
      "value":"levi@gmail.com",
      "subtype":"text"
   },
   {  
      "type":"text",
      "label":"Blood Group",
      "className":"form-control",
      "name":"text-1555049953585",
      "value":"AB+",
      "subtype":"text"
   },
   {  
      "type":"date",
      "label":"Date Of Birth",
      "className":"form-control",
      "name":"date-1555049951249",
      "value":"2019-03-08"
   }
]

Edit: 2 

 this.model = new FormRecords();
    this.model.Id = this.formId;
    this.model.label = this.label;
    this.model.TemplateJson = this.keys;

1 Ответ

0 голосов
/ 13 мая 2019

Проблема в том, что этот цикл *ngFor="let btn of model.Id", удалите цикл и используйте свой идентификатор записи (я думаю, он будет в ключе. Идентификатор или что-то в этом роде) в параметрах routerLink 

<th>
   <button mat-raised-button [routerLink]="['/formBuilder',yourRowId, {edit: btn}]">Edit</button>
</th>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...