Array not getting updated in DOM in Angular 2 - html

I am trying to update my array of contacts type on DOM. However I am getting every value when I am calling that array in a function but that value of array is not getting updated in DOM.
import {Component} from 'angular2/core';
#Component({
selector:'contacts',
templateUrl:'./dev/RouteComponents/contacts.component.html'
})
export class ContactsComponent{
checking=false;
contacts=[
{firstname:'vishu',lastname:'handa',contactno:'12654',gender:'male'},
{firstname:'lalit',lastname:'gupta',contactno:'56489',gender:'male'},
{firstname:'aman',lastname:'singh',contactno:'48984',gender:'male'},
{firstname:'gaurav',lastname:'gupta',contactno:'5485',gender:'male'}
];
addContactToContactList(firstname,lastname,contact,gender)
{
console.log(firstname.value+"--"+lastname.value+"--"+contact.value+"--"+gender.value);
this.contacts.push({firstname:firstname.value,lastname:lastname.value,contactno:contact.value,gender:gender.value});
this.run();
}
run()
{
console.log(this.contacts.length);
this.checking = true;
}
}
<p *ngIf="checking">checking</p>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Contact Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>
</tbody>
</table>
Value is not getting updated in DOM


Change your table rows tr tag for *ngfor as below and check it again :
<tr *ngFor="let contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>

Related

Table row does not split in columns when used from different component

How can I split my table row elements between columns when I use table row from different component. All the row goes to 'First Name' <th> column
client-list.html
<table mdbTable>
<thead class="black white-text">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone number</th>
<th>Procedure</th>
<th>Doctor</th>
<th>Registration</th>
<th>Registration</th>
<th>Edit</th>
<th>Serve</th>
</tr>
</thead>
<tbody>
<div *ngFor="let c of clients">
<tr *ngIf="!c.isAlreadyServed" client-list-item [client]="c"></tr>
</div>
</tbody>
</table>
client-list-item.html
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.phone}}</td>
<td>{{client.procedure}}</td>
<td>{{client.doctorsName}}</td>
<td>{{client.registrationDate | date: 'medium'}}</td>
<td>Edit</td>
<td>Serve</td>
client-list-item.ts
#Component({
selector: '[client-list-item]',
templateUrl: './client-list-item.component.html',
styleUrls: ['./client-list-item.component.css']
})
export class ClientListItemComponent {
#Input() client: Client;
}

Replacing the div with a ng-container should do the trick. ng-container element does not make it to the final rendered DOM and is used for having structural directives without polluting the DOM.
<ng-container *ngFor="let client of clients">
<tr *ngIf="!c.isAlreadyServed" client-list-item [client]="c"></tr>
</ng-container>

VueJS: V-for not displaying as desired

How can I get v-for to display table data in the same form as the following html:
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Product ID</th>
<th></th>
</tr>
Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side.
<tr v-for="(column, index) in schema" :key="index">
<th scope="col">{{column}}</th>
</tr>

You just need to place v-for on the element you want to repeat, not it's parent.
For loop should be put on <th></th>
<tr>
<th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>
Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html

bind grid header and data separately.
<template>
<table>
<thead>
<tr>
<th v-for="(header,index) in gridHeader" :key="index">
{{header.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in gridData" :key="index" >
<td>
{{data.name}}
</td>
<td>{{data.age}}
</td>
<td>{{data.place}}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import Vue from 'vue';
export default class HelloWorld extends Vue {
private gridHeader: object[] = [
{name: 'Name', displayName: 'Name'},
{name: 'Age', displayName: 'Age'},
{name: 'Place', displayName: 'Place'}
];
private gridData: any =[{name:'Tony',age:'31',place:'India'},
{name:'Linju',age:'26',place:'India'},
{name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>

DataTables initialization using html attribute

I have table
<table class="table dataTable table-striped table-bordered"
cellspacing="0" width="100%"
data-toggle="table"
data-processing="true"
data-serverSide="true"
data-ajax="#Url.Action("GetUsers", "Users")"
data-type="post"
data-page-length="25"
data-order="[[0,"asc"]]"
>
<thead>
<tr>
<th>ID</th>
<th>Role</th>
<th>User name</th>
<th>Date registered</th>
<th></th>
</tr>
</thead>
</table>
my js where init table
$(document).ready(() => {
let table = $('[data-toggle="table"]');
if (table.length > 1) {
table.DataTable();
}
});
I sees request ajax to GetUsers, but without parameters. What I should to do for fixed it? I should using more html attributes, or I should using js?

MVC View (Dont want to reapeat the Id's)

I have a WCF service and and we had to generate a records of clients who have consumed free credit.
I have generated that records but now clients with same login ID's are repeating in the records.
I dnt want to display the login ID again but want to display all the numbers they have called.
Here is the code of my view
#model IEnumerable<MyYello.Admin.Models.CallHistory>
#{ViewBag.Title = "UsersWhoHaveConsumedFreeCredit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Users Who Have Consumed Free Credit</h2>
<table class="table table-striped table-bordered tablesorter" style="display: block">
<thead>
<tr>
<th>Login</th>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
<th>Country</th>
<th>Phone</th>
<th>TarrifDesc</th>
<th>CalledNum</th>
<th>CallStart</th>
<th>CallEnd</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Phone</td>
<td>#item.TariffDescription</td>
</tr>
}
#if (!Model.Any())
{
<tr>
<td colspan="14">No Record Found</td>
</tr>
}
</tbody>
</table>
Just need an idea how

You should group by user login first then. Here's an example:
#foreach (var group in Model.GroupBy(history => history.Login))
{
var item = group.First();
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#string.Join(" - ", group.Select(history => history.Phone))</td>
<td>#item.TariffDescription</td>
</tr>
}

GWT adding "nullnullnullnullnull" when Creating HTML widget

I'm returning a list generated form a csv file in an html table format:
<span class="gwt-HTML">
<div id="productList">
nullnullnullnullnull
<table cellspacing="0">
<tbody>
<tr>
<th>Type Name</th>
<th>Class Name</th>
<th>Sub Class Name</th>
<th>Minor Class Name</th>
<th>Country Origin</th>
<th>SKU</th>
etc..
Notice the weird nullnullnullnullnull showing up? This happens when after the html gets converted into the widget:
SimplePanel pnl = new SimplePanel();
HTML res = new HTML(result);
pnl.add(res);
RootPanel.get("tableData").add(pnl);
The result variable is the html string:
<div id="productList">
<table cellspacing="0">
<tbody>
<tr>
<th>Type Name</th>
<th>Class Name</th>
<th>Sub Class Name</th>
<th>Minor Class Name</th>
<th>Country Origin</th>
<th>SKU</th>
...etc
I've checked to make sure the result String does not contain the null's. Anybody have an idea as to why this is happening? Very strange...