Laravel 8 Livewire refresh data after click|model events - components

I'm trying to create a simple table list view with laravel and livewire component. I can show the component but when I fire an event (change, wiremodel, click) the dataset is not updating, for example, I have an input text to filter my table, when I write on input the request is firing and component is getting it but component nor re-render with the new information
That's my full view
<header class="header py-6">
<div class="flex justify-between">
<h2 class="font-bold text-2xl text-blue-dark leading-tight">
{{ __('messages.Seizures') }}
</h2>
<div class="flex items-end">
<div class="cursor-pointer">
<i class="fas fa-plus-circle text-blue-light text-3xl"></i>
</div>
<div class="pl-8 flex items-center">
<i class="fas fa-filter text-blue-light text-lg"></i>
<input type="text" name="search" id="search-seizure" class="border border-blue-light rounded-full h-8 ml-1 px-4 text-blue-light" wire:model="filter">
</div>
<div class="pl-8 cursor-pointer" wire:click.prevent="toggleTrash()">
#if( $trash )
<i class="fas fa-trash text-blue-light text-xl"></i><i class="fas fa-toggle-on text-blue-light text-xl"></i>
#else
<i class="fas fa-trash text-gray-400 text-xl"></i><i class="fas fa-toggle-off text-xl text-gray-400"></i>
#endif
</div>
</div>
</div>
</header>
<div class="seizure-page">
<table class="table">
<thead>
<tr>
<th>#sortablelink('date', __('messages.Date'), [], ['class' => 'pr-2'])</th>
<th>{{ __('messages.Duration') }}</th>
<th>#sortablelink('location', __('messages.Location'), [], ['class' => 'pr-2'])</th>
<th>{{ __('messages.Notes') }}</th>
<th width="100px" class="text-right">{{ __('messages.Actions') }}</th>
</tr>
</thead>
<tbody>
#foreach($seizures as $seizure)
<tr class="cursor-pointer">
<td>{{ $seizure->date }}</td>
<td class="w-64">{{ $seizure->duration }}</td>
<td>{{ $seizure->location }}</td>
<td class="truncate-cell">{{ $seizure->note }} </td>
<td class="end">
<div class="flex justify-end">
<button wire:click="" class="btn btn-danger btn-sm px-1"><i class="fas fa-info"></i></button>
<button wire:click="edit({{ $seizure }})" class="btn btn-primary btn-sm px-1"><i class="fas fa-pen"></i></button>
<button wire:click="delete({{ $seizure }})" class="btn btn-danger btn-sm px-1"><i class="fas fa-trash text-warm-red"></i></button>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="flex justify-center pt-4">
{{ $seizures->links('vendor.pagination.neurons-unchained') }}
</div>
</div>
And this is the component logic
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Seizure;
use Carbon\Carbon;
use Livewire\WithPagination;
class Seizures extends Component
{
use WithPagination;
public $trash = false;
public $filter;
public function render()
{
//TODO: Get paginate number from user settings
$seizures = Seizure::sortable(['date' => 'desc'])
->whereNull('deleted_at')
->where('note', 'like', '%' . $this->filter . '%')
->paginate(10);
if( $this->trash) {
$seizures = Seizure::sortable(['date' => 'desc'])
->whereNotNull('deleted_at')
->where('note', 'like', '%' . $this->filter . '%')
->paginate(10);
}
return view('livewire.seizure.index')
->with('seizures', $seizures->appends(\Request::except('page')))
->layout('layouts.dashboard');
}
public function delete(Seizure $seizure) {
$seizure->deleted_at = Carbon::now();
$seizure->save();
$this->gotoPage(1);
}
public function toggleTrash () {
$this->trash = !$this->trash;
}
}
The toggle button for show elements in trash has same problem
Many thanks

Related

Sending Data to other route

Hello guys I'm working on a project with Nodejs, Handlebars and Mysql and i want to ask something. I have 2 routes, /page1 and /page2. In /page1 im doing UPDATE and SELECT queries. One of table's column i want it to redirect to /page2 in a label without refresing, is it possible to do that?
Page 1 is 'home'
<script src="/socket.io/socket.io.js"></script>
{{#if removedUser}}
<div class="alert alert-success alert-dismissible fade show" role="alert">
User has been removed.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{/if}}
<div class="row">
<div class="col-6">
<h1>Users</h1>
</div>
<div class="col-6 d-flex justify-content-end">
+ add user
</div>
</div>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
<th scope="col">Credits</th>
<th scope="col" class="text-end">Action</th>
</tr>
</thead>
<tbody>
{{#each rows}}
<tr>
<th scope="row">{{this.id}}</th>
<td>{{this.first_name}}</td>
<td>{{this.last_name}}</td>
<td>{{this.email}}</td>
<td>{{this.credits}}</td>
<td class="text-end" id="text-end">
<div class="input-group input-group-sm mb-3 credits_container">
<form action="/credits/{{this.id}}" method="post" id="form_container">
<input type="number" class="form-control" placeholder="Credits" name="input_credits" id="input_credits"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
<div class="col-12 d-grid">
<button class="bi bi-plus" id="post_credits" type="submit">Add</button>
</div>
</form>
</div>
{{!-- <i class="bi bi-plus"></i> Add --}}
<i class="bi bi-eye"></i> View
<a href="/edituser/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-pencil"></i>
Edit</a>
{{!-- <a href="/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-person-x"></i>
Delete</a> --}}
</td>
</tr>
{{/each}}
Label {{this.credits}}
</tbody>
</table>
Page 2 is 'label'
{{#each rows}}
<div class="row">
<label class="label label-default" id="set_input" name="set_input"> {{this.credits}}</label>
</div>
{{/each}}

How to do I pass unique identifier from button to Modal in Handlebars?

I'm creating a Accounting Web System using Nodejs and Express with Handlebars (.hbs), while using Bootstrap as my main Frontend toolkit. I have a dynamic table with each row consisting of information and three buttons. With delete button ("eliminar"), I'm adding a modal to verify that the user actually wants to delete information instead of by accident.
However, when inserting the modal into my handlebar, the information no longer belongs to its appropriate row but rather the first row from the query object rendered into the handlebar. My code looks like this:
<table class="table table-bordered">
<thead class="thead-dark text-center">
<tr>
<th scope="col">Tipo ID</th>
<th scope="col">Tipo Codigo</th>
<th scope="col">Tipo Descripcion</th>
<th scope="col">Acciones</th>
<th scope="col">Usuario</th>
{{!-- <th scope="col">Tiempo Creado:</th> --}}
</tr>
</thead>
<tbody class="text-center">
{{#each tipoparametro}}
<tr>
<th scope="row">{{this.tipoparid}}</th>
<td>{{this.tipoparcodigo}}</td>
<td>{{this.tipodescripcion}}</td>
<td class="text-center">
<a href="/viewuser/{{this.tipoparid}}" type="button" class="btn btn-outline-info btn-small"><i
class="bi bi-eye"></i>Ver</a>
<a href="/edituser/{{this.tipoparid}}" type="button" class="btn btn-outline-primary btn-small"><i
class="bi bi-pencil"></i>Modificar</a>
<a href="/delete/{{this.tipoparid}}" type="button" class="btn btn-outline-danger btn-small"
value={{this.tipoparid}} data-bs-toggle="modal" data-bs-target="#staticBackdrop"
data-target={{this.tipoparid}}><i class="bi bi-person-x"></i>Eliminar - {{this.tipoparid}}</a>
</td>
{{!-- New --}}
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true" value={{this.tipoparid}}>
<div class="modal-dialog text-center">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="staticBackdropLabel">Eliminar
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body ">
Estas seguro que quieres eliminar este Tipo Parametro:
<hr>
<p class="card-text"><strong>Id:</strong> {{this.tipoparid}}</p>
<p class="card-text"><strong>Codigo de Parametro:</strong> {{this.tipoparcodigo}}</p>
<p class="card-text"><strong>Usuario:</strong> {{this.usuarionombre}}</p>
<p class="card-text"><strong>Descripcion:</strong> {{this.tipodescripcion}}</p>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<a type="button" class="btn btn-outline-danger yes" href="/delete/{{this.tipoparid}}">Eliminar</a>
</div>
</div>
</div>
</div>
{{!-- New --}}
<td>{{this.usuarionombre}}</td>
</tr>
{{/each}}
</tbody>
</table>
Is there a simplified way to pass the unique identifier this.tipoparid into the modal so I can obtain the correct info from each row and not from the first all the time?
It's important for me to output the information inside the modal according to its row.

Template not rendering Django (NoReverseMatch)

I am not exactly sure what the issue is but I have this code in my project that once I select a date it will bring up a table with the name of students in my classroom but Django keeps telling me that there isnt NoReverseMatch. i have double check and everything is fine but not sure why it not working.
ERROR SHOWN
Reverse for 'attendance-page' with arguments '('',)' not found. 1 pattern(s) tried: ['attendance/(?P[0-9]+)\Z']
urls.py
path('attendance_class', views.attendance_class, name='attendance-class'),
path('attendance/<int:classPK>', views.attendance, name='attendance-page'),
path(r'attendance/<int:classPK>/<str:date>',views.attendance, name='attendance-page-date'),
path('save_attendance', views.save_attendance, name='save-attendance'),
views.py
#login_required
def attendance_class(request):
classes = Room.objects.all()
context = {}
context['classes'] = classes
return render(request, 'school/attendance_page.html', context)
#login_required
def attendance(request, classPK=None, date=None):
_class = Room.objects.get(id=classPK)
students = Student.objects.filter(id__in=ClassStudent.objects.filter(classIns=_class).values_list('student')).all()
context = {}
context['class'] = _class
context['date'] = date
att_data = {}
for student in students:
att_data[student.id] = {}
att_data[student.id]['data'] = student
if not date is None:
date = datetime.strptime(date, '%Y-%m-%d')
year = date.strftime('%Y')
month = date.strftime('%m')
day = date.strftime('%d')
attendance = Attendance.objects.filter(
attendance_date__year=year, attendance_date__month=month, attendance_date__day=day, classIns=_class).all()
for att in attendance:
att_data[att.student.pk]['type'] = att.type
print(list(att_data.values()))
context['att_data'] = list(att_data.values())
context['students'] = students
return render(request, 'school/attendance_control.html')
def save_attendance(request):
resp = {'status': 'failed', 'msg': ''}
if request.method == 'POST':
post = request.POST
date = datetime.strptime(post['attendance_date'], '%Y-%m-%d')
year = date.strftime('%Y')
month = date.strftime('%m')
day = date.strftime('%d')
_class = Room.objects.get(id=post['classIns'])
Attendance.objects.filter(attendance_date__year=year, attendance_date__month=month,
attendance_date__day=day, classIns=_class).delete()
for student in post.getlist('student[]'):
type = post['type['+student+']']
studInstance = Student.objects.get(id=student)
att = Attendance(student=studInstance, type=type, classIns=_class,
attendance_date=post['attendance_date']).save()
resp['status'] = 'success'
messages.success(request, "Attendance has been saved successfully.")
return HttpResponse(json.dumps(resp), content_type="application/json")
Jquery used
<script>
$(document).ready(function () {
$('table td, table th').addClass('px-2 py-1')
$('#data-form').change(function() {
location.href = "{% url 'attendance-page' class.pk %}/" + $(this).val()
})
$('#attendance-form').submit(function (e) {
e.preventDefault()
var _this = $(this)
$('.err-msg').remove();
var el = $('<div>')
el.addClass("alert alert-danger err-msg")
el.hide()
start_loader()
$.ajax({
url: "{% url 'save-attendance' %}",
data: $(this).serialize(),
method: 'POST',
type: 'POST',
dataType: 'json',
error: err => {
console.log(err)
alert("An error occured ", 'error');
end_loader();
},
success: function (resp) {
if (typeof resp == 'object' && resp.status == 'success') {
el.removeClass("alert alert-danger err-msg ")
location.reload()
} else if (resp.status == 'failed' && !!resp.msg) {
el.html(resp.msg)
} else {
el.text("An error occured ", 'error');
end_loader();
console.err(resp)
}
_this.prepend(el)
el.show('slow')
$("html, body, .modal ").scrollTop(0);
end_loader()
}
})
})
})
</script>
attendance template
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card card-default rounded-0 shadow ">
<div class="card-header">
<div class="d-flex w-100 align-items-center justify-content-between">
<h4 class="card-title fw-bold">Class Attendance Management</h4>
<div class="tools">
</div>
</div>
</div>
<div class="card-body">
<form id="attendance-form">
{% csrf_token %}
<input type="hidden" name="classIns" value="{{ class.pk }}">
<div class="container-fluid">
<fieldset>
<legend>Class Details</legend>
<div class="row">
<!-- <div class="col-md-6">
<div class="d-flex w-100">
<div class="col-auto pe-2 text-muted">Department:</div>
<div class="col-auto flex-shrink-1 flex-grow-1">
<p class="m-0 fw-bold">{{ class.assigned_faculty.department }}</p>
</div>
</div>
</div> -->
<div class="col-md-6">
<div class="d-flex w-100">
<div class="col-auto pe-2 text-muted">School Year:</div>
<div class="col-auto flex-shrink-1 flex-grow-1">
<p class="m-0 fw-bold">{{ class.school_year }}</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex w-100">
<div class="col-auto pe-2 text-muted">Level:</div>
<div class="col-auto flex-shrink-1 flex-grow-1">
<p class="m-0 fw-bold">{{ class.level }}</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex w-100">
<div class="col-auto pe-2 text-muted">Name:</div>
<div class="col-auto flex-shrink-1 flex-grow-1">
<p class="m-0 fw-bold">{{ class.name }}</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex w-100">
<div class="col-auto pe-2 text-muted">Faculty:</div>
<div class="col-auto flex-shrink-1 flex-grow-1">
<p class="m-0 fw-bold">{{ class.form_teacher}}</p>
</div>
</div>
</div>
</div>
</fieldset>
<hr>
<fieldset>
<legend>Date of Class</legend>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<input id="data-form" type="date" name="attendance_date" value="{% if date %}{{ date }}{% endif %}"class="form-control form-control-lg rounded-0" required>
</div>
</div>
</fieldset>
{% if date %}
<fieldset>
<legend>Attendance List</legend>
<table class="table tables-bordered" id="student-list">
<colgroup>
<col width="5%">
<col width="25%">
<col width="25%">
<col width="15%">
<col width="15%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th class="text-ceter">#</th>
<th class="text-ceter">Student Code</th>
<th class="text-ceter">Student Name</th>
<th class="text-ceter">Total Tardy</th>
<th class="text-ceter">Total Absent</th>
<th class="text-ceter">Total Present</th>
</tr>
</thead>
<tbody>
{% for student in att_data %}
<tr class="">
<td class="text-center">{{ forloop.counter }}</td>
<td>{{ student.data.student_code }}</td>
<td>{{ student.data.first_name }} {{ student.data.middle_name }} {{ student.data.last_name }}</td>
<td class="text-center">
<input type="hidden" name="student[]" value="{{ student.data.pk }}">
<input type="radio" class="btn-check" name="type[{{ student.data.pk }}]" value="1"
id="btnradio-{{student.data.pk}}" {% if student.type == '1' %} checked="checked" {% endif %}
autocomplete="off" required>
<label class="btn btn-outline-primary btn-sm px-1 py-0" for="btnradio-{{student.data.pk}}"><i
class="fa fa-check text-light"></i></label>
</td>
<td class="text-center">
<input type="radio" class="btn-check" name="type[{{ student.data.pk }}]" value="2"
id="btnradio-2-{{ student.data.pk }}" {% if student.type == '2' %} checked="checked" {% endif %}
autocomplete="off">
<label class="btn btn-outline-warning btn-sm px-1 py-0" for="btnradio-2-{{ student.data.pk }}"><i
class="fa fa-check text-light"></label>
</td>
<td class="text-center">
<input type="radio" class="btn-check" name="type[{{ student.data.pk }}]" value="3"
id="btnradio-3-{{ student.data.pk }}" {% if student.type == '3' %} checked="checked" {% endif %}
autocomplete="off">
<label class="btn btn-outline-danger btn-sm px-1 py-0" for="btnradio-3-{{ student.data.pk }}"><i
class="fa fa-check text-light"></label>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="clear-fix py-3"></div>
<center>
<button class="btn btn-sm btn-primary rounded-0 bg-gradient"><i class="fa fa-save"></i>
Save</button>
</center>
</fieldset>
{% endif %}
</div>
</form>
</div>
</div>
</div>
It's this line location.href = "{% url 'attendance-page' class.pk %}/" + $(this).val()
class.pk is not defined so it tries to call url with 0 arguments while it needs only one.

Bootstrap 4 - showing a list of items with texts and icons correctly

Using Bootstrap 4 I can create a list of list-items. Each list-item contains a text and a button with an icon. The icon is taken from Fontello.
On mobile screens (XS media) sometimes the button does not take the icon as button-content. The result is a very small button that does not contain the icon. This looks like on a mobile device:
On Chrome on my Desktop (F12, XS device) the result is as expected.
A diagnosis is: When I add a number of rows, then vertical size of the list-item gets smaller. Adding 10 items, and the list-item is just a few mm high! So, the size of the list-item gets less high, the button gets less high. Has this to do with 'flexbox'?
Why is this so? I know that when you omit to put anything (or any text) in the button, the button will remain very small. How to repair this?
The code for the button (inside Angular 6)
<ul class="list-group" id="cachesOnHikeList">
<li class="list-group-item d-flex flex-row" *ngFor="let cacheonhike of cachesonhike">
<div class="flex-grow-1">{{ cacheonhike.name| slice:0:22 }}</div>
<button type="button" class="btn btn-warning btn-sm" (click)="removeGeocache( cacheonhike.gcid)"><i class="icon-cancel-circled"></i></button>
</li>
</ul>
The 'cachesOnHikeList' CSS class is:
#cachesOnHikeList {
/*max-height: 250px;*/
max-height:35vh;
overflow:auto;
overflow-y:scroll;
}
Plan-B does not work either. This code (with 2 characters added as button text) produces the same results:
<button type="button" class="btn btn-warning btn-sm px-1"
(click)="removeGeocache( cacheonhike.gcid)"> <i class="icon-cancel-circled"></i> </button>
Plan-C: Adding a 'real' character as button text does not help. The 'X' is shown below the small button. The button is similar to the ones on the screenshot.
<button type="button" class="btn btn-warning btn-sm px-1 font-weight-bold"
(click)="removeGeocache( cacheonhike.gcid)">X</button>
The problem of the small buttons may be caused by (my/the) use of flexbox in combination with a scrollable list-groups
Solution 1:
Replace the flexbox solution with the BS4 grid.
<ul class="list-group" id="cachesOnHikeList">
<li class="list-group-item" *ngFor="let cacheonhike of cachesonhike">
<div class="row">
<div class="mr-auto">{{ cacheonhike.naam | slice:0:22 }}</div>
<button type="button" class="btn btn-warning btn-sm font-weight-bold col-2 col-sm-1 px-1" (click)="removeGeocache( cacheonhike.gcid)">X</button>
</div>
</li>
</ul>
Solution 2: responsive BS4 table
Using a Bootstrap 4 table that is Responsive. In this case the width of the columns is determine automatically by Bootstrap.
<div class="row mt-2">
<div class="listMaxEntries">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>GcId</th>
<th>Naam</th>
<th class="d-none d-sm-table-cell">Type</th>
<th class="d-none d-md-table-cell">Actief</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let geocache of geocachesPage.geocaches"
(click)="saveGeocacheInApplicationDataAndEditIt( geocache)">
<td>{{ geocache.gcid | slice:0:9 }}</td>
<td>{{ geocache.naam }}</td>
<td class="d-none d-sm-table-cell">{{ geocache.type }}</td>
<td class="d-none d-md-table-cell">{{ geocache.actief }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Solution 3: BS4 table with Flexbox.
Using this solution you can specify the column widths. In this case the row height is good!
<div class="row mt-2">
<div class="listMaxEntries">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-3 col-md-2">GcId</th>
<th class="col-9 col-sm-7 col-md-5">Name</th>
<th class="col-sm-3 d-none d-sm-table-cell">Type</th>
<th class="col-md-2 d-none d-md-table-cell">Actief</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let geocache of geocachesPage.geocaches" class="d-flex"
(click)="saveGeocacheInApplicationDataAndEditIt( geocache)">
<td class="col-3 col-md-2">{{ geocache.gcid | slice:0:9 }}</td>
<td class="col-9 col-sm-7 col-md-5">{{ geocache.naam }}</td>
<td class="col-sm-3 d-none d-sm-table-cell">{{ geocache.type }}</td>
<td class="col-md-2 d-none d-md-table-cell">{{ geocache.actief }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Enjoy Bootstrap 4 -- what a very nice package!

Angular2 dependent dropdown based on selected value

Here am trying to append a dependent drop down based on value drop down (you can see in my HTML code for value drop down).I have wrote a onchage method to get appear dependent dropdown in html.Here i have dependent drop down for only three(i.e, Services Performed, Products Sold, Gross Retail) selected values of my values dropdown. Now am getting the dependent dropdowns, but when i have change the another drop down i.e, 2nd or 3rd ...etc dropdown ,then the previous drop down is getting disappear and latest changed dropdown value is getting appear.
so, please help me to solve it.
my HTML code is
<table class="table table-bordered-light">
<tbody>
<tr class="grey_th">
<td>Step</td>
<td>Action</td>
<td>Value</td>
<td>Number</td>
<td>Sample Calculation</td>
</tr>
<tr *ngFor="let row of rows; let i = 'index'">
<td [innerHTML]="row.step"></td>
<td>
<select [class.disabled]="i==0" [(ngModel)]="row.operator" name="action" style="width: 100%">
<option *ngFor="let actions of actionsStaticData; let i='index'" value="{{actions.id}}" id="actions{{i}}">{{actions.action}}</option>
</select>
</td>
<td>
<tr>
<td>
<div>
<!-- here i have wrote onchange method **onValueChange()** and passing i also along with the value -->
<
[(ngModel)]="row.operand" style="width: 100%" (change)="onValueChange($event.target.value, i)">
<option *ngFor="let values of valuesStaticData; let i='index'" value="{{values.value}}" id="values{{i}}">{{values.value}}</option>
<option value="-" disabled="disabled">-----</option>
<option *ngFor="let values of scalesData; let i='index'" value="{{values.Id}}" id="values{{i}}">{{values.Name}}</option>
</select>
</div>
</td>
<td>
<div class="ml-15" *ngIf='rowLength == i'>
<select [(ngModel)]="row.operandSubOption" style="width: 100%">
<option *ngFor="let values of servicesList; let i='index'" value="{{values.value}}" id="values{{i}}">{{values.Name}}</option>
</select>
</div>
</td>
</tr>
</td>
<td>
<input type="text" [(ngModel)]="row.numeral">
</td>
<td> {{row.result}}{{toFix}}</td>
<td>
<a style="color: #000;" (click)="addRows()" *ngIf='showPlus == true'>
<span class="f-plus">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
</a>
<a *ngIf='showPlus == false'>
<!-- <span class="del">
<i class="fa fa-plus disable" aria-hidden="true"></i>
</span> -->
</a>
<a (click)="deleteFieldValue(row, i)" *ngIf='hideDelete==true' data-toggle="tooltip" data-placement="top" title="Remove">
<span class="f-minus">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
my typesript code is
onValueChange(value, i) {
if (value === 'Services Performed') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getServices()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});
}
if (value === 'Products Sold') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getInventoryGroupData()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});``
}
if (value === 'Gross Retail') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getProductLineDetails()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});
}
}

Resources