(SOLVED) Select Object with Matcher TypeScript Error

Help Requests
1

Hi. I am trying to create a object with matcher.bind and I am getting this error. I am using the same code as in guide.

Error:
Uncaught TypeError: Cannot read property ‘id’ of null
at App.productMatcher (webpack-internal:///app:11)
at _loop (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:4264)
at SelectValueObserver.synchronizeOptions (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:4268)
at MutationObserver.eval (webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:4379)

Code used. Copied from guide.

export interface IProduct {
id: number;
name: string;
}

export class App {
message=“This is Aurelia”;
products: IProduct[] = [
{ id: 0, name: ‘Motherboard’ },
{ id: 1, name: ‘CPU’ },
{ id: 2, name: ‘Memory’ },
];

productMatcher = (a, b) => a.id === b.id;

selectedProduct: IProduct = { id: 1, name: ‘CPU’ };
}

Template used: copied from guide

Select product:
Choose... ${product.id} - ${product.name}

Selected product: {selectedProduct.id} - {selectedProduct.name}

** I tried this in javascript and NO error. Error only in TypeScript.

Thanks

2

Can you create a reproduction based on this: https://stackblitz.com/edit/aurelia-typescript?file=index.ts

3

Here is the reproduction.

It is a copy/paste from https://aurelia.io/docs/binding/selects#select-object-with-matcher

Thank for your time

4

Your first <option/> has a value of null, when the observer try to inspect it and check if values match, it will basically do null.id. Easiest is to change your matcher to:

  productMatcher = (a, b) => a && b && a.id === b.id

It will also prevent you from error when you set selectedProduct to either null / undefined

Example https://stackblitz.com/edit/aurelia-typescript-rjgtua?file=src/app.ts

5

Wao! You are the man. Thank you for your time.