Angular 2's ngModel feature allows for easy data binding and manipulation, particularly

I currently have an array of objects structured like this...

this.survey = [

      {id: 1, answer: ""},
      {id: 2, answer: ""},
      {id: 3, answer: ""},
      {id: 4, answer: ""},
      {id: 5, answer: ""},
      {id: 6, answer: ""},
      {id: 7, answer: ""},
      {id: 8, answer: ""},
      {id: 9, answer: ""},
      {id: 10, answer: ""},
      {id: 11, answer: ""},
      {id: 12, answer: ""},
      {id: 13, answer: ""},
      {id: 14, answer: ""},
      {id: 15, answer: ""},
      {id: 16, answer: ""},
      {id: 17, answer: ""},
      {id: 18, answer: ""},
      {id: 19, answer: ""},
      {id: 100, answer: ""},
      {id: 101, answer: ""}

    ];

My question pertains to how I can precisely bind to the object where the value of id is equal to 101 with a text area input?

 <textarea name="comments" class="form-control" (change)="updateSurvey($event, 101)" 
[(ngModel)]="survey.?????"></textarea>

I understand that typically it's done by knowing the index position, but in this scenario, I am unable to reliably rely on that method. So, how can I directly bind to the object where id equals 101 instead of using [(ngModel)]="survey[21]"?

Thank you.

angulartypescript

Answer №1

It seems that finding a solution without utilizing the index may not be feasible.

One potential approach is as follows:

<textarea name="comments" class="form-control" (change)="updateSurvey($event, 101)" 
[value]="getSurveyAnswer(101)"></textarea>

In your component file:

getSurveyAnswer(id: number): string {
   return this.survey.find(s => s.id == id).answer;
}

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

Using absolute imports to resolve modules in TypeScript and Next.js

When I import functions from files using absolute imports, I keep encountering errors that I have been trying to resolve. The errors manifest in a certain way, as shown here: Despite the errors, the functions are successfully imported and usable. It seems ...

typescriptwebpacknext.js

React Native: Issue with the data section in FlatList

I encountered an issue while using Flatlist to address a problem, but I ran into an error with the data property of my Flatlist. The error message is not very clear and I'm having trouble understanding it ( No overload matches this call. Overload 1 of ...

reactjstypescriptreact-nativereact-native-flatlist

Using TypeScript to map over unboxed conditions: transforming OR operators into AND operators

I am working with an array that has multiple objects containing functions foo. My goal is to create a new object signature with a function foo that inherits all the signatures from the array item foo functions. let arr = [ { foo: (a: 'a') = ...

typescript

I am currently working on an Angular 8 project and experiencing difficulties with displaying a specific value from a JSON object in my template using an ngFor loop

Apologies if I am not familiar with all the terms, as I am mostly self-taught. I started with Udemy and then turned to Stack Overflow to tackle the more challenging aspects. This platform has been incredibly valuable and I am truly grateful for it. Now, l ...

htmltypescriptangular8

Oops! An issue occurred: The value 'NgxMatDrpModule' was not expected in the specified file path: node_modules/ngx-mat-daterange-picker/ngx-mat-daterange-picker.d.ts

Encountered an error while building an Angular 7 app using the command ng build --configuration=dev. The exception shows a single quote prefixed to NgxMatDrpModule. Even after deleting node_modules, package-lock.json and reinstalling node modules, the issu ...

angulartypescriptangular-materialdatepickerangular-daterangepicker

Set up a SQS queue to receive notifications from an SNS topic located in another AWS account by using AWS CDK in TypeScript

Looking to establish a connection between an SQS queue and an SNS topic located in a different account using CDK (TypeScript). Presented below is the code snippet (contained within a stack) that I believe should facilitate this integration. However, I have ...

typescriptamazon-web-servicesamazon-sqsamazon-snsaws-cdk

How to Retrieve Properties from Child Elements in NativeScript ngFor Directive

Working with a dynamically generated checklist in Angular/Nativescript: <StackLayout *ngIf="assessment"> <StackLayout *ngFor="let instance_item of assessment.exam_instance_items; let i= index"> <ns-examitem [attr.id] ...

angularnativescriptnativescript-angular

Creating a function in Typescript to extend a generic builder type with new methods

Looking to address the warnings associated with buildChainableHTML. Check out this TS Playground Link Is there a way to both: a) Address the language server's concerns without resorting to workarounds (such as !,as, ?)? b) Dodge using type HTMLChain ...

typescripttypescript-generics

A complete guide to incorporating Angular to hide a Bootstrap 4 Modal using jQuery

After adding jQuery and Bootstrap to the package, I encountered an issue where the modal function was not working properly. Typescript & HTML import $ from 'jquery'; export class AppComponent { name = 'Angular ...

jqueryangular

Integrating Octokit middleware in Next.js for enhanced functionality

Currently, I am in the process of honing my skills by creating a GitHub app. In Octokit, there is a feature called createNodeMiddleware that caught my attention. However, integrating it with next.js seems to pose some challenges. My main issue right now re ...

node.jstypescriptnext.jsoctokit-js

What is the process for incorporating TypeScript types into a JavaScript library?

After adding p5 and @types/p5 to my project, I imported p5 in the following way: import * as p5 from 'p5' However, when I tried using p5.createImage(100, 100), I encountered this error message indicating that 'createImage' is not a re ...

typescripttypesmodule

What is the proper way to structure a React component class without any props?

When working with Typescript in a React project, the top level component typically does not receive any props. What is the recommended approach for typing this scenario? I have been using the following coding structure as a template, but I am curious if t ...

reactjstypescript

Updating the value of a dynamic ngModel in Ionic3

Does anyone know how to change the value of ngModel in Ionic 3 framework? I need to programmatically toggle all ion-toggle elements. component: allRecs:any; constructor(){ this.allRecs = [ { label: "label 1", model : "model1" }, ...

angularionic-frameworkionic3

Incorrect typings being output by rxjs map

combineLatest([of(1), of('test')]).pipe( map(([myNumber, myString]) => { return [myNumber, myString]; }), map(([myNewNumber, myNewString]) => { const test = myNewString.length; }) ); Property 'length' does not ...

typescriptrxjs

Output in Typescript for the chosen option

A message can be sent based on the user's choice of either Now or Later. If the user selects Now, the message will be sent immediately. If Later is chosen, a date format option needs to be created for setting a future date. <label for=""& ...

htmlangulartypescript

Ways to update MatTable Data following file upload

i'm still new to Angular, and for the past week, I've been struggling with a frustrating issue that I just can't seem to solve. Every time I upload a file in my backend to add users from a company, my MatTable doesn't automatically refr ...

angularfile-uploadrxjsangular-material

Tips for troubleshooting JavaScript in an Angular 5 application using Visual Studio 2017

I recently developed an Angular 5 web application using VS2017. Initially, the app was functioning well until I decided to enable javascript debugging. Post that change, upon launching the app, I encountered the following error: How can I troubleshoot an ...

angularvisual-studio

Error: The code encounters a SyntaxError due to an unexpected token '?' in iOS 14

Currently in the process of developing a Headless Shopify project using this starter: https://github.com/vercel/commerce. While testing the demo environment, I encountered some bugs that seem to be specific to iOS 14 or newer. The primary issue stems from ...

reactjstypescriptnext.js

Using TypeScript to narrow down types within mapped types

Can you create a mapped type based on the property type? For example, if I want to map all properties with type String to Foo and all other types to Bar. Can this be done like this: type MappedType<T> = { [P in keyof T]: T[P] === String ? Foo : B ...

typescript

The bidirectional data binding between two components is only functioning for the initial letter

Encountering a peculiar error that I have been researching with no luck in finding a solution. Most of the related findings are outdated and ineffective. Error Message An error is triggered when two-way binding to a property: 'Expression has chang ...

angularevents2-way-object-databinding