Creating a dynamic matrix table in Angular 2

I am looking to create a dynamic matrix table using Angular 2 that displays test results in a specific format:

    Test1   Test2   Test3
 A  1,5     1,8     1,6
 B  1,8     1,6     1,9
 C  1,6     1,6     1,8

This example data demonstrates the structure I am aiming for. The JSON data can vary in size, with the possibility of having more tests than just 3. Here is an example of my JSON:

data = [{
 "test": "Test1",
  results: [{
    "env": "A",
    "result": 1,5
  }, {
    "env": "B",
    "result": 1,8
  }, {
    "env": "C",
    "result": 1,6
  }]
}, {
  "test": "Test2",
  results: [{
    "env": "A",
    "result": 1,5
  }, {
    "env": "B",
    "result": 1,7
  }, {
    "env": "C",
    "result": 1,6
  }]
}, {
  "test": "Test3",
  results: [{
    "env": "A",
    "result": 1,8
  }, {
    "env": "B",
    "result": 1,6
  }, {
    "env": "C",
    "result": 1,6
  }]
}];

Any assistance on how to achieve this would be greatly appreciated.

Answer №1

One possible approach could involve utilizing two nested *ngFor directives:

<div *ngFor="let row of data">
  <span *ngFor="let column of row.results>
    {{column.result}}
  </span>
</div>

Furthermore, it is advised to review this website's guidelines on formulating effective questions in order to receive more responses.

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

Tips for simulating a configuration dependency using Proxyquire in TypeScript

Within my codebase, there exists a config.ts file that contains the following method: // Config interface is utilized to specify expected values export default function getConfig(): Config { return {amount: 50} } In a specific class located at ../src ...

array.forEach is effective unless I incorporate another iteration within it

I have encountered a dilemma while working with two pages that return arrays of objects. The code snippet provided below works perfectly for one array but fails to update the values of a nested array in another instance: this.adminService.WaiversGetAll() ...

The PrimeNG Divider Component's content background color

Having trouble changing the background color of text inside a Divider provided by PrimeNG. The entire section has a background color applied through a class added to a div container: div However, this background color does not extend to the Text within th ...

What steps should be taken to ensure compatibility between a 4.X Typescript project and an older version like 3.X?

What are the steps to ensure a package developed using TS 4.X is compatible with 3.X? This means leveraging new features for newer versions while fallback to any or unknown for older versions. Can directives be utilized for this specific purpose? Check ou ...

Sending data to the makeStyle function in TypeScript

How can I set the style of backgroundImage in my React component based on the value of post.mainImage? Here is the code snippet: import React from 'react'; import { Post } from '../interfaces'; import { makeStyles, createStyles, Theme ...

React 18 update causes malfunctioning of react-switch-selector component

I'm facing an issue where the component is not rendering. I attempted to start a new project but it still didn't work. Is there a solution to fix this problem or should I just wait for an update from the original repository? Encountered Error: ...

Tips for creating a carousel with Angular 9 to showcase numerous items

I've got this code snippet that I'm working on. I want to incorporate a Carousel feature using Angular 9 without relying on any external libraries. Currently, all the data items are appearing in a single row (they are exceeding the specified bor ...

I attempted to use ng add @angular/pwa, but encountered an error code that is baffling to me. Are there any steps I can take to resolve this issue?

npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While trying to find a solution: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! in node_modules/@angular/common npm ERR! @angular/common@"^14.2.3" ...

How can I assign a default value to an angular 2+ dropdown menu? [I have not found a solution in previous inquiries]

When I attempt to set a default value with an empty channelId, it works as expected. Here is the example code snippet: destChannelList = [ { "channelId":"", "channelName":"SMS" }, { "channelId":1, "channelName":"Voice" ...

Suitable typing for imported components lacking a common interface implementation

Looking for a way to avoid duplicating the array entries: import { ComponentA } from './components/A.component'; import { ComponentB } from './components/B.component'; const COMPONENTS: any[] = [ ComponentA, ComponentB ]; @NgModu ...

Populate choices in the mat-select dropdown

I am encountering an issue with two-way binding in the mat-select component from Angular Material. In my TypeScript file, I have an option list and a variable for binding called valueFromDB. When I choose a value in the mat-select component, it automatical ...

Angular downgrades from version 13.3.8 to 13.3.7

When I input the command: ng v I am shown the version as "Angular: 13.3.8" in the image. Can someone explain where this version is coming from and how can I change it back to 13.3.7? Furthermore, I noticed that the packages listed in the screenshot are d ...

What is the method for showing the number of characters in a string within a textfield by utilizing events in Angular

I have been working on a project that requires me to calculate and display the length of a string entered into a text field using Events. There is an additional condition where the string length must be greater than 4 in order for the length to be displaye ...

Encountering a CLI error while attempting to run the 'ng serve

ng : Error encountered while trying to run ng serve. The file C:\Users\Lenovo\AppData\Roaming\npm\ng.ps1 is not digitally signed and cannot be loaded due to security reasons. To learn more about running scripts and adjusting e ...

Is there a way to determine when a custom form control is identified as pristine in Angular?

I have implemented custom form control components in my Angular application that utilize the ControlValueAccessor interface and they are functioning excellently. However, I encounter an issue when the markAsPristine() method is invoked on either the paren ...

Remove a row from an ng-bootstrap table

I've managed to successfully implement the ng-bootstrap table full example. Deleting objects from the DOM and database works fine, but I'm struggling to figure out how to delete a row from the view without having to reload the page. It's i ...

Issue: The module "Angular" cannot be found in the Swiper package, resulting in an "ionic2-calendar Error

I recently updated the package for my project Utilizing Ionic and Angular to create applications for iOS and Android Current versions: Ionic 7, Angular 16 Following a recommendation, I made the switch from 'ion-slides' to the Swiper.js library ...

Mongoose does not compare BCRYPT passwords that are empty

I'm currently working on incorporating bcrypt into my mongoose model using typescript. Referencing this link as a guide. However, since my project is in typescript, I'm unable to directly use the provided code. I'm confused about how they&a ...

Steps to validate the execution of the ngCopy function in an Angular 6 unit test

While working on one of my angular components, I have implemented the ngCopy module to enable text copying to clipboard. The code snippet below showcases how I have used this module: import {Component, Input, OnInit} from '@angular/core'; import ...

Strategies for resolving linter problems involving mixins in vue-typescript

Scenario: I am currently working on a project where I am implementing mixins to engage with data from components and other methods. Despite the code functioning as expected, I am encountering errors in Vetur indicating that the method does not exist in ...