<ng-container *ngIf="openofferListData.length==0">
<tr>
<td colspan="8" class="p-3 bg-white">
<div class="alert-body text-center">
<div class="alert-content">
<h5 class="text-black-50">No Data</h5>
</div>
</div>
</td>
</tr>
</ng-container> .
it show console error is "Can't bind to 'ngIf' since it isn't a known property of 'ng-container'."
another format
it also show console error is "Can't bind to 'ngIf' since it isn't a known property of 'ng-container'." and not display no data in the table row
<ng-container *ngIf="!openofferListData?.length==0">
<tr>
<td colspan="8" class="p-3 bg-white">
<div class="alert-body text-center">
<div class="alert-content">
<h5 class="text-black-50">No Data</h5>
</div>
</div>
</td>
</tr>
</ng-container>
My array list
public openofferListData = [
{
serialNo: '1',
offerValue: '4,400,000 ',
primaryWarranty: 'Public',
submissionDate: '2022-01-01',
submissionTime: '02:31 PM',
facilityName: 'Trading Est',
commercialRegistrationNo: '234',
offerStatus: 'awaiting approval',
},
{
serialNo: '2',
offerValue: '4,000,000 ',
primaryWarranty: 'Public',
submissionDate: '2022-01-01',
submissionTime: '02:31 PM',
facilityName: 'companies',
commercialRegistrationNo: '23456',
offerStatus: 'published',
},
{
serialNo: '3',
offerValue: '3,900,000',
primaryWarranty: 'Private',
submissionDate: '2022-01-01',
submissionTime: '02:31 PM',
facilityName: 'Company',
commercialRegistrationNo: '23463',
offerStatus: 'paused',
},
{
serialNo: '4',
offerValue: '3,500,000',
primaryWarranty: 'Private',
submissionDate: '2022-01-01',
submissionTime: '02:31 PM',
facilityName: 'Brothers Foundation',
commercialRegistrationNo: '546456',
offerStatus: 'paused',
}
];
Related
I am trying to fill my table HTML using an API, however, I want to fill the given HTML table into a column instead of a row to look like the following image layout, but however, I am getting filled as row as you can see in my second image. is there a way to convert it into a column-based filling?
row fill
const arr = [
{
"demo": [
{
"_id": "T0810",
"title": "Historian",
"tags": [
"demo"
],
"queries": [],
},
{
"_id": "T0817",
"title": "book",
"tags": [
"demo"
],
"queries": [],
},
],
"demo_2": [
{
"_id": "T0875",
"title": "Program",
"tags": [
"demo_2",
"Control"
],
"queries": [],
},
{
"_id": "T0807",
"title": "Interface",
"tags": [
"demo_2"
],
"queries": [],
}
]
}
]
const keys = Object.keys(arr[0]);
export default function Demo() {
return (
<div className="wrapper">
<table className="table">
<thead>
<tr>
{keys.map((i) => (
<th key={i}>
<div className="column">
<div className="header">{i}</div>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{keys.map((key) => (
<tr key={key}>
{arr[0][key].map((item) => (
<td key={item._id}>
<div className="column">
<div className="option">{item._id}</div>
</div>
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}
It's only slightly more involved than what you have put together. The first thing you have to consider is that your table will have as many rows as the lengthiest key, so if demo array has 2 element and demo_2 has 6 elements, the table will have 6 rows even though there will be nothing for 3 of those rows to display for demo.
As such your top level loop will have to loop not through keys but through a number representing the length of the lengthiest key, if that makes sense. So apart from getting the keys, you will need something like this:
const max_rows = keys.reduce((acc, cur) => {
if (arr[0][cur].length > acc) return arr[0][cur].length;
else return acc;
}, 0);
Then your nested loop will look like this:
<table className="table">
<thead>
<tr>
{keys.map((i) => (
<th key={i}>
<div className="column">
<div className="header">{i}</div>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{Array(max_rows)
.fill(0)
.map((key, index) => (
<tr key={index}>
{keys.map((item, ind) => (
<td key={ind}>
<div className="column">
{arr[0][item][index] ? (
<div className="option">
{arr[0][item][index]._id}
</div>
) : null}
</div>
</td>
))}
</tr>
))}
</tbody>
</table>
Here is a Sandbox: https://codesandbox.io/s/adoring-wave-5fub7?file=/src/App.js
i'm trying to show a table of data that is coming from Firebase Firestore, i've already managed to put all data into a array, but when i try to show that content, the entire array shows up instead of the single items, see the image:
And heres my code:
<template>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in result"
v-bind:key="index"
>
<td>{{ result }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
import firebase from 'firebase'
import {db} from '../service/firebase'
export default {
data () {
return {
userName: null,
result: [],
name: null,
email: null,
userMail: null,
telefone: null,
userPhone: null,
userAccept: null,
}
},
async created() {
var userData = []
await db.collection("users").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
userData.push(doc.data())
});
});
this.result = userData.map(a => a.name)
console.log(result)
}
}
</script>
How do i show a table of single items of the array instead of a table of arrays?
Thank you in advance!
You're printing the whole content using {{result}}, the right syntax is the following :
<tr v-for="(item, index) in result" v-bind:key="index" >
<td v-for="(record,i) in item" :key="i">{{ record }}</td>
</tr>
How to fetch and display data in ASP.net core using React js Line 26: 'cusList' is not defined no-undef error is coming up.
import React, { Component } from 'react';
import './Map';
export class FetchCustomer extends Component {
static displayName = FetchCustomer.Name;
constructor(props) {
super(props);
this.state = { customers: [], loading: true };
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: this.renderCustomerTable(this.state.cusList);
return <table className='table'>
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{cusList.map(cus =>
<tr key={cus.Id}>
<td></td>
<td>{cus.Id}</td>
<td>{cus.Name}</td>
<td>{cus.Address}</td>
<td>
<a className="action" onClick={(id) => this.handleEdit(cus.Id)}>Edit</a> |
<a className="action" onClick={(id) => this.handleDelete(cus.Id)}>Delete</a>
</td>
</tr>
)}
</tbody>
</table>;
fetch('api/Customer/Index')
.then(response => response.json())
.then(data => { this.setState({ cusList: data, loading: false }) });
}
}
Following changes are needed in your code...
In your constructor change the last line of code with following:
this.state = { customers: [], loading: true, cusList: [] };
And in the "tbody" section please change the code to:
<tbody>
{this.state.cusList.map(cus =>
<tr key={cus.Id}>
<td></td>
<td>{cus.Id}</td>
<td>{cus.Name}</td>
<td>{cus.Address}</td>
<td>
<a className="action" onClick={(id) => this.handleEdit(cus.Id)}>Edit</a> |
<a className="action" onClick={(id) => this.handleDelete(cus.Id)}>Delete</a>
</td>
</tr>
)}
</tbody>
This should work.
Also it's pretty clear from the error itself about what you are missing.
Hope it helps.
I'm trying to populate rows in an HTML table using the Vue framework - the data is as seen below:
TeamRows: [
{ team: 'One', times: ['1', '2', '3'] },
{ team: 'Two', times: ['4', '5', '6'] },
{ team: 'Three', times: ['7', '8', '9'] }
]
I've tried following this codepen, but with bad result - this is my HTML:
<tbody>
<tr v-for="(row, rindex) in teamRows">
<td>{{rindex}}</td>
<template>
<cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
</template>
</tr>
</tbody>
</table>
<template id="template-cell">
<td>{{ value }}</td>
</template>
And this is the Vue component:
Vue.component('cell', {
template: '#template-cell',
name: 'row-value',
props: ['value', 'vindex', 'rindex']
});
I would like the team to go in the first column in a row and the times to follow along in as many columns as there are times. Hope someone with more Vue knowledge is able to help me out here. Cheers.
Turns out the reason is you're using in-DOM template and browser moves unknown cell element above the v-for, and Vue can't access row value anymore: https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
A solution without cell component, just with inline cell elements, works fine. Also, template wrapper is not needed in a table template:
new Vue({
el: '#app',
data: {
teamRows: [
{ team: 'One', times: ['1', '2', '3'] },
{ team: 'Two', times: ['4', '5', '6'] },
{ team: 'Three', times: ['7', '8', '9'] }
]
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<table>
<tbody>
<tr v-for="row in teamRows" :key="row.team">
<td>{{ row.team }}</td>
<td v-for="time in row.times">{{ time }}</td>
</tr>
</tbody>
</table>
</div>
Also, as a result of a discussion, you can still use a component if you wrap your table into another component for example, so that browser don't interfere and Vue has a chance to render everything properly:
new Vue({
el: '#app',
data: {
teamRows: [
{ team: 'One', times: ['1', '2', '3'] },
{ team: 'Two', times: ['4', '5', '6'] },
{ team: 'Three', times: ['7', '8', '9'] }
]
},
components: {
'mytable': {
template: `<table>
<tbody>
<tr v-for="row in rows" :key="row.team">
<td>{{ row.team }}</td>
<cell v-for="time in row.times" :value="time" :key="time"></cell>
</tr>
</tbody>
</table>`,
props: ['rows'],
components: {
'cell': {
template: `<td>{{ value }}</td>`,
props: ['value'],
}
}
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<mytable :rows="teamRows"></mytable>
</div>
I want to do some clever binding on my nested KO array and I am really not sure how I would do it. Based on selection from the select, I want to get some elements based on the selection that has been made.
My ko obeservablearray, which looks like:
{
"ProductName": "Product123",
"RequiredComponents": "CAP 10% H/Vol",
"StockCode": "142111411",
"RequiredQtyByBom": 4,
"QtyUnassignedInWarehouse": 0,
"QtyAllocatedInWarehouse": 40,
"PCBReference": "442C",
"QtyOnOrder": 26,
"Vendors": [],
"RequireVendor": false
},
{
"ProductName": "Product123",
"RequiredComponents": "Screws",
"StockCode": "Screws",
"RequiredQtyByBom": 1,
"QtyUnassignedInWarehouse": 0,
"QtyAllocatedInWarehouse": 14,
"PCBReference": "Screws",
"QtyOnOrder": 26,
"Vendors": [
{"VendorID": "3",
"VendorName": "ABC Supplier",
"VendorMOQ": 50000,
"VendorItemPrice": 322},
{"VendorID": "4",
"VendorName": "DEF Supplier",
"VendorMOQ": 4,
"VendorItemPrice": 120}
],
"RequireVendor": true
},
{
"ProductName": "Product123",
"RequiredComponents": "14141415",
"StockCode": "151555231",
"RequiredQtyByBom": 1,
"QtyUnassignedInWarehouse": 0,
"QtyAllocatedInWarehouse": 170,
"PCBReference": "1414",
"QtyOnOrder": 26,
"Vendors": [],
"RequireVendor": false
}
I want to data-bind the Vendor MOQ, Price based on what vendor was selected. I pass the selectedVendorID back to my viewmodel.
<select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"></select>
I want my Output to look like the following:
<table class="table table-bordered">
<thead>
<tr>
<td>Stock Code</td>
<td>Qty</td>
<td>Vendor</td>
<td>Price p/Unit</td>
<td>MOQ</td>
<td>Value</td>
</tr>
</thead>
<tbody data-bind="foreach: CheckStock">
<tr>
<td data-bind="text: StockCode"></td>
<td data-bind=""></td>
<td>
<select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"></select>
</td>
<td>
<input type="text" data-bind="value: Vendors().VendorPrice" /></td>
<td data-bind="text: Vendors().VendorMOQ"></td>
<td>TODO CALC</td>
</tr>
</tbody>
</table>
I have found the Solution to my Problem:
By Data binding the SelectedVendor in the Following manner I get the result I was looking for:
<input type="text" data-bind="value: SelectedVendor() ? SelectedVendor().VendorPrice : '0'" /></td>
<td data-bind="text: SelectedVendor() ? SelectedVendor().VendorMOQ : '0'"></td>
As mentioned in this Article (Example 3)