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

What steps can be taken to choose an Angular npm package for datetimepicker in a TypeScript file?

I am facing an issue where document.getElementById and document.querySelector are not returning any results ... I need to access this specific HTML element in order to set a new attribute at a certain event. <datetime id="datePicker" [datepicker]="da ...

Encountering a TypeError while working with Next.js 14 and MongoDB: The error "res.status is not a function"

Currently working on a Next.js project that involves MongoDB integration. I am using the app router to test API calls with the code below, and surprisingly, I am receiving a response from the database. import { NextApiRequest, NextApiResponse, NextApiHandl ...

The 'toBeInTheDocument' property is not found on the 'Matchers<HTMLElement>' type

Having trouble setting up testing for a components library. Despite trying various examples and similar threads, I have not been successful. I can confirm that my setupTests.ts file is being loaded correctly (verified through a console.log). Additionally, ...

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven&apos ...

Can Angular Interpolation be utilized to showcase Angular components?

I am currently working with an Angular component that relies on a getData method to display results using Angular interpolation in its template. However, I have encountered a scenario where I need a child component to override this method and return a cust ...

Is there a way to unselect a button in Angular?

I have a set of buttons representing different categories. When I click on a button, it displays a card with relevant information. <app-category-button [label]='category.name' [isSelected]='category.id === (selectedCategoryId$ | asy ...

I'm encountering an issue in my node application where it is unable to access the push

I am a beginner in the world of node.js and express. Whenever I try to start my application using the command npm start, I encounter an error message saying Cannot Read property push of undefined from my index.js file. The problematic code snippet looks l ...

Updating the useState() function in React when the value changes can be done by utilizing the

I'm struggling to update the count value in my React project. Within my dynamic set, I aim to display the size of the set whenever it changes! My goal is to continuously update the count variable to match ratedSet.size whenever the set's size c ...

Typescript filtering function that results in an empty array

Struggling with filtering an array in typescript and aurelia as I keep getting empty lists. For example, when searching for the keyword ra within the firstName property, I expect to retrieve the object with the name "Raja". Not sure where I'm going w ...

Transferring form state information between parent and child elements

In my development project using Angular 2, I encountered an issue with managing a long and complex form by splitting it into a parent component and two child components for better organization. The challenge arose when I needed to track the form status for ...

Errors related to reducer types in createSlice of Redux Toolkit

As I embark on a new React-Redux project with Typescript, I find myself facing some challenges despite my previous experience. While my knowledge of React and Redux is solid, I am still getting acquainted with Redux toolkit. Transitioning from a typed back ...

Loader for dynamically loading tabs in Angular 2

I am looking to develop a dynamic tabs loader using Angular 2 material with specific syntax support. <generic-tabs [tabs]="tabs" tabVisibleField="name"> <test-cmp [tabContent] testData="hello"></test-cmp> ...

The process of converting a video URI to a blob is encountering difficulties when using the Ionic framework on iOS devices

I have implemented the code below to convert a video file into a blob for iOS. Takevideo() { const options: CameraOptions = { sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, destinationType: this.camera ...

Testing the functionality of an Angular service using unit tests

Confused about how to test a service in an Angular project that involves a small class with an observer? Can't seem to figure out why the test fails when calling the 'pop' method. Want to ensure that the public methods of this class perform ...

Using Lodash to Substitute a Value in an Array of Objects

Looking to update the values in an array of objects, specifically the created_at field with months like 'jan', 'Feb', etc.? One way is to loop through using map as demonstrated below. However, I'm curious if there's a more co ...

Angular APP_INITIALIZER Function Redirects Prematurely Prior to Completion of Observable List

Utilizing the rxjs from method to transform an array of Observable<void> elements into a single observable that is then passed through concatAll(): export const initApplication = (): (() => Observable<any>) => { // Inject all services ...

Implementing custom color names in Material UI using TypeScript

Currently, I am utilizing Material UI alongside TypeScript and attempting to incorporate custom colors into my theme. While everything seems to be functioning properly, the VSCode linter is displaying the following message: Type '{ tan: string; lightR ...

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Currently in the process of developing a website with Angular, I've encountered an unusual bug. The issue arises when using an *ngFor div to generate twelve buttons. <div *ngFor = "let color of colors; let i = index" style = "display ...

Steps for incorporating a filter feature in an Angular Material table

.HTML: Can someone assist me with implementing a filter in this component? I tried using it with the expansion table, but unfortunately, the filter is not working as expected. <mat-dialog-content style="width: 63rem; overflow: initial;"&g ...

Upon completing the installation of the @angular/cli@latest node module, the ng file was unexpectedly missing

I'm currently working on Git Bash on my Windows 10 machine. The command I used was: npm install --save @angular/cli@latest Here is the result: + @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad9d6d3fa8b899488 ...