What is the correct way to extract a value from a keyvalue pair?

When dealing with an object that returns boolean "issues", I specify it as a string. If the value is true, I aim to show a checkmark; if false, I want to display a cross.

<ul *ngFor="let filtered of reposFiltered | keyvalue">
<li *ngIf="filtered.key=='issues' && filtered.value=='true'"> <i class="bi bi-check-lg"> </i> </li>
<li *ngIf="filtered.key=='issues' && filtered.value=='false'"> <i class="bi bi-x-lg"> </i> </li>
</ul>

Object:

description: "The personal website of Ben Balter. Built using Jekyll and GitHub Pages. See humans.txt for more infos."
html: "https://github.com/mojombo/benbalter.github.com"
issues: false
language: "CSS"
name: "benbalter.github.com"
[[Prototype]]: Object

Current output: This specific field does not appear on the list.

Desired output: When true, show a checkmark; when false, display a cross.

Answer №1

Give this a shot

<ul *ngFor="let item of items">
  <li *ngIf="item.status=='active'"> <i class="bi bi-check-circle"></i> </li>
  <li *ngIf="item.status=='inactive'"> <i class="bi bi-x-circle"></i> </li>
</ul>

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

Recursive array generation

Given an array 'featureList', the goal is to create a new array 'newArray' based on a specific ID. For example, for ID 5, the newArray would be ['MotherBoard','Antenna','Receiver'], where Receiver correspon ...

Is there a way to retrieve erased information from firebase without any references?

My journey into the realms of Ionic and TypeScript/JavaScript is a new one, and I am learning as I progress. Currently, I am facing an issue when trying to delete an "Event", which results in the error: "null is not an object (evaluating '_this.curre ...

Changing the color of the pre-selected date in the mat-datepicker Angular component is a key feature that can enhance the

Is there a way to adjust the color of the preselected "today" button in mat-datepicker? https://i.stack.imgur.com/wQ7kO.png ...

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

Typescript error: The property 'set' is not found on type '{}'

Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...

The MUI DataGrid's onCellEditStop event triggers when a cell's value is

When using MUI DataGrid, I encountered an issue where the value of a previously edited cell changes when editing another cell. I read that using onCellEditCommit as a solution, but since it's deprecated, I'm seeking an alternative fix. const ha ...

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

After attempting several methods, I am struggling to display the books in the desired format. My objective is to showcase products within a specific category, such as: http://localhost:4200/books/category/1. Initially, it worked without specifying a catego ...

Issue with triggering Observable during an Angular 2 HTTP call

In my current setup using Ionic 2 with Angular 2, I have the following method implementation: private login(params: any, url: string){ var p = new Promise<JsonResult>((resolve, reject) => { let body = JSON.stringify(params); l ...

"Embracing the Power of Font Awesome 5 in Angular 5

After using the font-awesome npm package (which is Font Awesome 4.7 version), I decided to upgrade to Font Awesome 5. In order to make this transition, I installed the following packages: "@fortawesome/angular-fontawesome": "^0.1.1", "@fortawesome/fontawe ...

Issue with accessing class property in events.subscribe in Ionic3

I am currently working on a class that listens for events. When the event is triggered, I need to add the data that accompanies it to an array and then display it. Here's what my class looks like: export class customClass { dataArray:Array<stri ...

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

Identifying favorited items by a user within the result list obtained from a GET request

Through a GET request, I am seeking to identify which of the outcomes have already been favorited or liked by the current user using the unique id associated with each object. There is a service in place that can determine if the user has favored an object ...

Executing Cross-Component Communication in Angular 7: A Quick Guide

I've encountered a challenge with a checkbox in the header component. If the checkbox is checked, I need to display an alert message when the application loads. The tricky part is that the checkbox is linked to the home component. Therefore, if I am o ...

I'm looking to find the Angular version of "event.target.value" - can you help me out?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/pages/home/home.component.html I am currently working on getting the dropdown menu to function properly for filtering the flags displayed below it. My initial thought was to replicate the search ...

Tips and tricks for setting up a functional react select component using Material UI

Having an issue with React Select material UI where the dropdown select is not functioning properly. The popup does not open up as expected. I am looking to display react select in a modal dialog box. import MenuItem from "@mui/material/MenuItem" ...

Turn off slider trace animation?

Check out the slider component in MUI here: https://mui.com/material-ui/react-slider/ I'm currently exploring how to disable the animation on the nub so it moves instantly to the new position. Any advice on how to achieve this? ...

Angular 6 - Resolving the Issue of 'Function calls are not supported in decorators' in Production Builds

Currently, I'm in the process of developing a cutting-edge Angular 6 application. However, as I was progressing with the development phase and tried to create a prod build using the following command: ng build --prod To my dismay, I encountered a pe ...

Finding the final day of a specific year using the moment library

When it comes to determining the last day of a year, hard-coding the date as December 31st seems like a simple solution. While there are various methods using date, js, and jquery, I am tasked with working on an Angular project which requires me to use mom ...