Can someone assist me with the following issue: https://stackblitz.com/edit/duplicates-aas5zs?file=app%2Fapp.component.ts,app%2Fapp.component.html I am having trouble finding duplicate values and displaying them below. Any guidance would be appreciated.
I am new to working with arrays, so I could use some assistance. I have already searched on Google but haven't found a solution yet...
Are you looking to input numbers and identify duplicates within the list?
Or are you seeking a method to find duplicated numbers within an Array?
Furthermore, considering you are already utilizing ngModel, there is no necessity for an additional 'includes' input as the value is readily accessible in your logic (.ts file).
There appears to be an issue:
This solution only works for single digit numbers, ranging from 0 to 9, and does not account for two-digit numbers like "10".
If you simply need to find duplicate digits:
In your .ts file, create a new method (or modify an existing one):
inputNumbersString = '';
duplicatesResult = [];
findDuplicates(): void {
const arrOfDigits = Array.from(String(this.inputNumbersString), Number);
this.duplicatesResult = arrOfDigits.filter(
(item, index) => index !== arrOfDigits.indexOf(item)
);
console.log(this.duplicatesResult);
}
Since the input tag returns a string, you must convert it to a number, separate the digits, check for duplicates, and then display them using console.log. Make sure to store the result in the "duplicatesResult" variable for use in your HTML.
In your HTML:
Remove the ng-container and *ngFor that wraps the input, as they will generate unnecessary inputs for each element in the array.
Here is your updated input field and button. Clicking the button will invoke the findDuplicates function. Note that an input value is not required, as all necessary data is already present in the .ts file:
<input [(ngModel)]="inputNumbersString" placeholder="Enter numbers here" />
<button (click)="findDuplicates()">FIND DUPLICATES</button>
<span>{{ duplicatesResult }}</span>
The span tag will display the output.
If desired, you can re-enable the "checked" feature by checking the length of duplicatesResult.
I am a bit confused by the "NaN" part, but here is a script to check for multiple occurrences:
.html
<input [(ngModel)]="inputString" placeholder="Enter digits here" />
<button (click)="findOccurrenceWanted()">Check if there are more than {{ occurrenceToCheck }} occurrences</button>
<div *ngFor="let result of resultsArray">
<span>{{ result }}</span>
</div>
.ts
export class AppComponent {
name = 'Angular 5';
private inputString = '';
private alreadyCheckedDigits: any[] = [];
private occurrenceToCheck = 3;
public resultsArray = [];
findOccurrenceWanted(): void {
const inputStringIntoArray = Array.from(this.inputString);
inputStringIntoArray.forEach((digit) => {
if (!this.alreadyCheckedDigits.includes(digit)) {
const occurrenceCounter = this.inputString.split(digit).length - 1;
this.alreadyCheckedDigits.push(digit);
if (occurrenceCounter >= this.occurrenceToCheck) {
this.resultsArray.push(digit);
}
}
});
}
}
Essentially, you specify the number of occurrences to check using the occurrenceToCheck variable, then when you click the button, the script checks each digit's occurrence in the string provided by the user and stores the result in the resultsArray. It also ensures that each digit is only checked once using the alreadyCheckedDigits array.
This script can now work with letters and all kinds of digits, not just numbers.
I hope this explanation helps!
I'm working with restangular and have set up an interceptor to handle 401 responses by redirecting to another state. The issue is that angular only allows the injection of providers, not services, in config. Is there a way to access the $state: ng.u ...
I need to run all scenarios in multiple instances of a browser. I've set the maximum instance value in capabilities, but only one instance of Chrome opens and the tests run sequentially. How can I ensure that the tests run in multiple instances simult ...
In creating a basic registration page, I encountered a strange issue with the button functionality. Whenever I attempt to submit the form, an error should be logged to the console. However, the buttons on the registration page appear to be inactive - it se ...
I'm diving into my initial TypeScript project and encountering an issue with the "style". I attempted to utilize style!, create an if(changeBackgroundColor){}, but without success. let changeBackgroundColor = document.querySelectorAll('[data-styl ...
Since updating my libraries to the latest Angular 6 and RxJS 6, I've encountered an issue. I have a RouteService class that functions as a service. It utilizes the HttpClient to fetch data from a remote API. However, after the update, I'm facing ...
As a newcomer to Python, I am currently working on an Exercism exercise. In addition to this being my first time working with matrices, I have been learning a lot over the past couple of weeks. While I am still getting the hang of Classes in Python, the ...
Greetings! I am currently in the process of learning how to manipulate the DOM using Angular 2+ and my goal is to incorporate an Input field with type email when the click event is activated. Despite conducting some research via Google, I have been unable ...
I'm currently working on an Angular project that utilizes ng2-charts and chart.js. Interestingly, when I run the project locally, the datalabels are visible (check: project run locally). However, once I deploy the project onto a server, the datalabels ...
Embarking on a new Angular2 project to enhance my skills, I've made the decision to avoid Yeoman Generator and tools like Grunt or Gulp due to the software still being in development. Instead, I'm utilizing the Node Package Manager to run automat ...
I am facing an issue where I need to interact with a button that appears multiple times on the website within nested cards. Specifically, I am trying to locate the card containing a pet named Bala, as shown in the attachment below, and click on the Detail ...
To handle user input exceeding maxLength and dynamically add < mat-error > to the DOM in case of an error, I have implemented an attribute directive that enforces the character limit on input fields. This directive is used across multiple files in the proj ...
The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to use ngFor but encountered errors. ...
Q: How can I create a new promise within a request, and then return it in a nested request? Here is the code snippet: request({ // --------------request 1------------ url: request_data.url, method: request_data.method, form: request_data.data ...
The demonstrations provided by the angular team only illustrate injecting Http for typescript. https://angular.io/docs/js/latest/api/http/Http-class.html How can this be accomplished in JavaScript? import {Http, HTTP_PROVIDERS} from 'angular2/http& ...
In my testing environment, I want to eliminate the need for repeated login actions in each test run. My approach involves implementing 'Re-use state' and 'Re-use Authentication', but I've encountered a challenge with Firebase using ...
Imagine having two observables. Whenever the first one emits, there should be a 2-second pause to check if the other observable emits something within that timeframe. If it does, then no emission should occur. However, if it doesn't emit anything, the ...
Looking to create a dynamic sunburst highchart that displays three levels at a time while allowing interactive drilling. For instance, if there are 5 levels, the chart should initially show the first three levels. When clicking on level 3, levels 2, 3, and ...
I am encountering an issue while using ng new project_name: The error message states "An invalid configuration file was found ['angular.json']. Please delete the file before running the command." I am stuck on this problem and unsure of how to ...
Here is the code snippet I am working with: var points = 4; var yModifier = []; for (var i = 0; i <= points; i++) { yModifier.push([]); }; yModifier.forEach( (a, j) => { var start = j; var end = start + points; fo ...
Hey everyone, I'm facing a problem and could use some assistance. Currently, I am trying to detect when two containers collide in my project. However, the issue is that the collision is being detected before the objects even start moving on screen. It ...