Before I go into this, the code was working great just awhile back and I haven't made changes, but I am wondering if Angular updated their variable referencing or what.
I have a JSON array that is raw and assigned to an any-type variable siteList.
When I run console.log(siteList) it spits out the JSON object perfectly.
Used to when I ran the code below everything worked and showed up just fine.
<div *ngFor="let site of siteList" class="card mat-elevation-z8" style="margin: 20px; border: 1px solid lightgrey;">
<div class="card-header" style="background: #f88d3d; color: white;">
{{site.Name}} - {{site.Age | date}}
<span *ngIf="site.Location != null">
-
<i class="fas fa-map-marker-alt"></i>
</span>
<mat-radio-button (click)="setSite(site.SiteId)" class="float-right"></mat-radio-button>
</div>
</div>
The strange thing is, it's making the appropriate amount of cards so it is taking in the object correctly. But none of my variable references are working like they used to. Is it because siteList is defined as any and not like a full class? I am just floored because I have not changed anything.
Related
I am working on a project that has and Angular 10 front end and a Dot Net Core 3.1 API.
When debugging/developing the system, one the screens displays a model property, a string called name, correctly.
However, whenever I run ng build --prod the same screen cuts off the property value. Each value returned appears to have the last 7 characters missing.
The code for the HTML is below:
<div *ngFor="let item of versionDocItems">
<div class="form-group">
<div class="row">
<div class="col pt-1 filterName ml-3 align-self-center">
{{item.name | titlecase}}
</div>
<div class="col-2">
<button class="btn blue backButton filterButton" (click)="download(item.itemFileId)" type="submit" name="applyFilter">Download</button>
</div>
</div>
</div>
</div>
The CSS seems to be fine and shows that there is plenty of space left for the property to show.
Also when I have used console.log to return property values they are returning correctly.
Any help would be greatly appreciated
I am trying to display a list of items in an Angular web app. I am having a list component which contains the related *ngFor directive to display each list-item component. Inside the HTML of the list-item component I defined the following structure:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="item">
<div class="content font-weight-bold" style="width: 250px; height: 180px" *ngStyle="{'opacity':
(object.booleanValue) ? 1.0 : 0.5}">
<div class="someActualContent">
<div>{{object.text}}</div>
....
</div>
</div>
</div>
Displaying of the objects works fine (all information are correctly shown) until I add the *ngStyle-directive. Then, no element is visible anymore. However, in inspect mode I can see that all list-items are actually there - they are invisible and smaller than I defined them in the div at style="...". Compiling is successful.
I tried object.booleanValue==true but this didin't lead to any changes.
Does someone have an explanation?
Thank you in advance!
Enclose the ngStyle directive in square brackets instead of micro-syntax notation *ngStyle. Try the following
<div
class="content font-weight-bold"
style="width: 250px; height: 180px"
[ngStyle]="{'opacity': (object.booleanValue) ? 1.0 : 0.5}"
>
...
</div>
have an issue with the expansion of the accordion containing a list of items using a keyboard.
There is a complication in that all the accordion's data is being populated from an API, so a lot of the solutions that I had seen are hardcoded. For example, using the information found in the article below didn't work as the unique values are hard coded:
https://www.hassellinclusion.com/blog/accessible-accordion-pattern/
I've added in a lot of the appropriate ARIA labels and navigating via tab around it works well as does the screen reader, but I can't get the accordion to expand.
I tried to talking it from another angle by getting the enter button to be interpreted as a click on the element to expand the accordion but got completely lost trying to do such a thing in Angular as inserting Vanilla JS is not as straight forward as it would seem.
Here is the code, it's spread over three components so I've compiled into one and removed some styling classes for legibility:
<div tabindex="0" (keydown.enter)="myFunction()" role="button">
<h2 tabindex="0">
<img>
<i tabindex="0"></i>{{ organiser.name }}
</h2>
//this component displays the selected item. the accessibility on this works fine
<app-selected-area role="region">
</app-selected-area>
</div>
<div class="content">
//this component displays the items that can be selected
<app-skill-item class="item">
<div tabindex="0" role="button">
<h3>{{ skill.name }}</h3>
<button *ngIf="updateable && isSelected()" (click)="select()">
Remove
<span class="screen-reader-only">
{{ skill.name }}
</span>
skill
</button>
<button *ngIf="updateable && !isSelected()" (click)="select()" tabindex="0">
Add
<span class="screen-reader-only">
{{ skill.name }}
</span>
skill
</button>
</app-skill-item>
</div>
Any help or hints would be much appreciated!
Ended up finding the answer for this in the follow question/thread:
Trigger click in Typescript - Property 'click' does not exist on type 'Element'
let element: HTMLElement = document.getElementsByClassName('btn')[0] as HTMLElement;
element.click();
this was the following code that let me manipulate the accordion via the enter key as a click
I made a project to pull data from web service API.
But the web service has nested arrays that needs to be displayed too, how can i access the data from nested JSON arrays?, what is the right way to write inside the HTML to get the data from the web service.
By the way when i fetch the first objects it shows correctly, only in the nested objects.
This is the response screenshot from Postman
This is the API link
This is the link of the project on Stackblitz
Click on sign in without user or password, then any school, then divisions.
divisions component is the one i'm asking about.
If I remember correctly, you have the data available.
Just use the dots to reach the data you need: response.data[0].grade[0].classes[1].grade_id
In the template you can do this:
<div *ngFor="let division of divisionList">
<div *ngFor="let grade of division.grade">
<div *ngFor="let class of grade.classes">
<span>{{ class.grade_id }}</span>
</div>
</div>
</div>
In your component you can start with this:
<ng-container *ngIf="divisionList">
<button name="American Primary"
*ngFor="let division of divisionList"
class="choose-list arrow-onclick1" data-toggle="collapse" data-target="#list1">
{{division.name}}
<i class="fa fa-arrow-right pull-right arrow-down-onclick1"
aria-hidden="true" style="margin-top:12px"></i>
</button>
<a routerLink="/editaisdivision"
style="text-decoration: none;">
<span class="fa fa-pencil pen-pen-pen" aria-hidden="true"
style="margin-left: 10px; color: #171b5e;"></span>
</a>
</ng-container>
Note that you can't use two structural (with *) directives in one tag, hence the ng-container.
Use JSON.parse(JSON_STRING) and you will get a JavaScript object that represents the data in the JSON.
I have a repeating partial view in an ASP.NET MVC 5 application that is showing up incorrectly in certain circumstances in Chrome. It's not happening in any other browser, and I'm at a loss to figure out what's going on.
My razor code is pretty straightforward -- just a foreach loop that calls #Html.Partial(). I'm going to skip it for now in the interest of saving space, but the HTML it produces looks like this:
<div id="dataDisplay">
<div id="dataRow39" class="list">
Edit
<span class="normal">AAA Test 1</span>
<span class="large">Test Description 1</span>
X
</div>
<div id="dataRow1" class="list">
Edit
<span class="normal">AHBA</span>
<span class="large">Arkansas Home Builders Association</span>
X
</div>
. . .
</div>
And the page itself looks like this:
When users click the "Edit" link, I use an AJAX call to replace a single div with a different partial view that has input elements for data-entry. That div also has a cancel button that triggers another AJAX call back to the original partial view. That produces nearly identical HTML, but one element gets positioned wrong.
<div id="dataDisplay">
<div id="dataRow39" class="list">
Edit
<span class="normal" style="">AAA Test 1</span>
<span class="large" style="">Test Description 1</span>
X
</div>
<div id="dataRow1" class="list">
Edit
<span class="normal">AHBA</span>
<span class="large">Arkansas Home Builders Association</span>
X
</div>
. . .
</div>
The only difference I can see is those empty style tags. They don't appear in the console when I debug my AJAX, and they don't appear in other browsers. But if I manually go in and remove them, it doesn't seem to fix the layout problem.
I realize I've left out a lot of details. I'm trying to keep this from being really excessively long. I can provide any of the missing details if needed. Does anybody have any idea what could be going wrong?
UPDATE: As I'm playing around with this a bit, I have a feeling it has something to do with the float:right on the .delete-button class. Here's the CSS for that class:
.delete-button {
float: right;
font-size: .9em;
text-align: right;
padding: 0 3px;
margin: auto 0;
color: #888;
}