Ways to resolve the issue of missing data display in Angular when working with the nz-table

Below is the code snippet:

<nz-table #listTable nzSize="middle" [nzData]="data">
      <thead>
        <tr>
          <th nzShowExpand></th>
          <th>Location</th>
          <th>Device</th>
          <th class="tbWidth text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        <ng-template ngFor let-data [ngForOf]="listTable.data">
          <tr>
            <td nzShowExpand [(nzExpand)]="mapOfExpandData[data.id]"></td>
            <td nzBreakWord [textContent]="data.name"></td>
            <td nzBreakWord [textContent]="data.device"></td>
            <td nzBreakWord class="text-center">
              <nz-button-group>
                <button nz-button nzType="primary" (click)="openFormDrawer(data)"><i nz-icon nzType="edit"
                    nzTheme="outline"></i></button>
                <button nz-button nzType="danger" (click)="deleteRoomData(data)"><i nz-icon nzType="delete"
                    nzTheme="outline"></i></button>
              </nz-button-group>
            </td>
          </tr>
          <tr [nzExpand]="mapOfExpandData[data.id]">
            <td></td>
            <td colspan=7>
              <nz-table>
                <thead>
                  <tr>
                    <th nzWidth="25%">Location Code</th>
                    <th nzWidth="25%">Location Description</th>
                    <th nzWidth="25%">Device Code</th>
                    <th nzWidth="25%">Device Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td nzBreakWord [textContent]="data.locationCode"></td>
                    <td nzBreakWord [textContent]="data.locationDescription"></td>
                    <td nzBreakWord [textContent]="data.deviceCode"></td>
                    <td nzBreakWord [textContent]="data.deviceDescription"></td>
                  </tr>
                </tbody>
              </nz-table>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </nz-table>

How can I prevent the display of "NO DATA" in ng zorro?

I have data inside the table, but the message "NO DATA" keeps showing. How can I remove this message in Angular Zorro?

The expand feature works, but when I click to expand, the "NO DATA" message also appears, even though there is data present in the nz-table.

If there is data available, the "NO DATA" message should not be displayed. How can I achieve this functionality?

javascriptangulartypescript

Answer №1

To easily incorporate the functionality, simply include [nzData]="['']" within your subtable setup

This particular message will be displayed in case the nzData attribute is empty within the context of nz-table 

<nz-table [nzData]="['']">
  <thead>
  <tr>
    <th nzWidth="25%">Location Code</th>
    <th nzWidth="25%">Location Description</th>
    <th nzWidth="25%">Device Code</th>
    <th nzWidth="25%">Device Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td nzBreakWord [textContent]="data.locationCode"></td>
    <td nzBreakWord [textContent]="data.locationDescription"></td>
    <td nzBreakWord [textContent]="data.deviceCode"></td>
    <td nzBreakWord [textContent]="data.deviceDescription"></td>
  </tr>
  </tbody>
</nz-table>

Answer №2

To utilize the `nzTemplateMode` in your nz-table, simply include it within the component

<nz-table nzTemplateMode>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Availability</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nike Shoes</td>
      <td>$100</td>
      <td>In Stock</td>
    </tr>
   
  </tbody>
</nz-table>

Answer №3

<nz-table [nzData]="items" [nzFrontPagination]="true" [nzShowPagination]="true" [nzNoResult]="titanium">
.....
</nz-table>

<ng-template #titanium class="tt">
 <span *ngIf="items.length === 0">No items on sale</span>
</ng-template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Safari on iOS 11.4 ignoring the 'touch-action: manipulation' property

I ran into an issue while developing a React web app that I want to work seamlessly across different platforms. My goal was to allow users to interact with a div element by double-clicking on desktop and double-tapping on mobile devices. However, when tes ...

javascripthtmlioscssreactjs

I am able to successfully implement CORS in my .Net 6 and Angular application on my local machine, but unfortunately, the functionality

After struggling for 2 days to make CORS work with my Angular frontend and .Net Core backend, I finally cracked... I set up a basic Angular application with a simple "get" request hitting my backend API. In the backend API, I created a straightforward pro ...

.netangulariiscors.net-6.0

having difficulty showing the column filter feature in the DataTable

I am currently utilizing a datatable and in need of an individual column-based search feature along with a global search. I am working with a 2D array. The search boxes are being displayed, however, the search functionality is not functioning correctly fo ...

javascriptjquerydatatables

Switching from callback to function in TypeScript

Currently, I am utilizing the mongodb driver to establish a connection with mongo: public listUsers(filterSurname?:string):any { if (this.connected) { debug.log(this.db); var results; this.db.collection(' ...

mongodbtypescript

Unable to retrieve basic profile data from LinkedIn Members using their email ID unless they are signed in

I am struggling to retrieve the basic profile details of Linkedin Members using their email ID. Despite my efforts, I haven't been able to find relevant information in the documentation. My attempt involved creating an app, initializing the JavaScrip ...

javascriptlinkedin-api

Effortlessly submit multiple forms at once with just a single click using the WordPress form

One issue I'm experiencing is that the forms on my site are generated using shortcodes. I have a suspicion that the buttons I created, which lead to submission form1 and then form2, may not be working properly because of this. This is the current set ...

javascriptjqueryformswordpressonclick

Effortless glide while dragging sliders with JavaScript

In the code below, an Object is looped through to display the object key in HTML as a sliding bar. jQuery(function($) { $('#threshold').change(updateThreshold); function updateThreshold () { var thresholdIndex = parseInt($(&apos ...

javascriptjqueryhtmljson

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

htmljsonangularobservable

Automatically adjusting the top margin of the main content section depending on the variable height of a fixed header

Visit our mobile site here (mobile view) Currently, I have set the margin-top of .main-content based on sticky-animation, which keeps the header fixed at the top on mobile. However, there is a div with a close button (X) that alters its height dynamically ...

javascripthtmljquerycssshopify

Sending a JavaScript variable to PHP and retrieving the PHP result back into a JavaScript variable

I am looking to transfer a JavaScript variable to a PHP file using AJAX, and then retrieve the PHP file's output back into a JavaScript variable. For sending the JavaScript variable to the PHP file, I found a method that suggests using ajax to assign ...

javascriptphpjqueryajax

Using Ajax to populate two dropdown menus by utilizing the selected value from a third dropdown menu

I have an HTML page that includes 3 drop-down boxes. Whenever I make a selection in one of the boxes, the chosen value is sent to the server, and the server should return the values for the other 2 drop-down boxes. How can I dynamically populate the other ...

javascriptajaxselectcombobox

Vue.js does not apply the "selected" attribute to set the HTML <option> tag to default

Trying to designate a default <option> tag from the available options. Utilizing v-model on the <select> tag, the vue.js documentation indicates the following approach: v-model will disregard the ... selected attributes present on form ele ...

javascripthtmlvue.jsv-modelselect-options

How to filter ngFor elements in Angular 2 based on user input?

Is there a method for filtering elements rendered through *ngFor based on real-time user input following each keyup event? ...

angular

Making a secure connection using AJAX and PHP to insert a new row into the database

Explaining this process might be a bit tricky, and I'm not sure if you all will be able to assist me, but I'll give it my best shot. Here's the sequence of steps I want the user to follow: User clicks on an image (either 'cowboys&apos ...

phpjavascripthtmlajaxfunction

React Native Material - Implementing a loading indicator upon button press

With React Native Material, I am trying to implement a loading feature when a button is clicked. The goal is to show the "loading" message only when the button is active, and hide it otherwise. Additionally, I would like for the loading message to disappea ...

javascripttypescriptreact-nativematerial-ui

Guide to setting a SetState function within a component (Using NextJS and TypeScript)

I'm currently diving into TypeScript, and I've hit a roadblock when it comes to the correct assignment for my setState function that I need to pass to a component. /index.tsx import { Dispatch, SetStateAction, useState } from "react"; ...

typescriptreact-hooksnext.jscomponentssetstate

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

AngularJS - Shared service object mistakenly removed in error

When I call the removeQuestion() function for the second time, 2 questions are being deleted instead of one. Any suggestions on what might be causing this issue? Let me know if you require additional code snippets. controller.js crtPromoCtrl.controller(& ...

javascriptangularjstwitter-bootstrapservicecontroller

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

javascriptjqueryhtmlforms

Utilize Angular to dispatch an HTTP request to an API, passing an object as a parameter

When using a search form in my web application, I fill in input fields that are then captured in the SearchCriteria object. The next step involves clicking on the search button to submit the SearchCriteria object to an API. This API will generate a collec ...

angularapihttppostget