showing [Object Object] angular-CodePudding

When I click modal and the selected row the output of my text box is [Object Object]?

I'm trying to get in my DTO once I click my Object to the other component

.Services

@Injectable({
providedIn: 'root'
})
export class DeliveryReceiptService {
transactionCode: myDTO;

.COMPONENT WITH MY TABLE . TS

selectedRow(row){
console.log(row)
this.Services.transactionCode = row;
this.dialogRef.close();

}

THE OTHER COMPONENT THAT NEED TO GET THE OBJECT .TS

get transactionCode() {
  return this.transactionService.transactionCode;
}

.HTML

<td>
  <input style="width:200px" 
  formControlName="Example" ngModel={{transactionCode}}>
</td>

CodePudding user response：

It shows [Object Object] because you are trying to display an object inside a DOM element (any object's toString() method will give you that).

You need a string there.

How do you want to display the data?

If you just want to see for testing reasons, change the this.Services.transactionCode = row line in .COMPONENT WITH MY TABLE . TS with this.Services.transactionCode = JSON.stringify(row).

CodePudding user response：

Because transactionCode is an Object. Maybe you want the input to hold a value from a property on transactionCode, e.g transactionCode.id?

You could iterate over objects properties using | keyvalue pipe to print each property and its key in template.

But seems like you just want to give <input> some value. Are you sure you want the entire object to be value of the input? I mean you could do it, but I doubt your users are proficient in structuring a JSON - doesn't look pretty either.