Using ngIf in angular but I am getting Bindings cannot contain assignments

reservedcoders: ReservedCoders;

export class ReservedCoders{

    constructor(

        public coderID:number

    ){ }

}

mycoder is an array

<td>

<div *ngIf="reservedcoders.find(s => s.coderID == mycoder.svUserID); else notEqual">

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Add 10%</button>

</div>

<ng-template #notEqual>

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Add 10%</button>

</ng-template>

</td>

edited Jan 2 at 2:46

Dale Burrell

3,35652655

asked Jan 2 at 2:45

Anusha

what's with the else notEqual in the ngIf here? ngIf already checks for undefined, it doesn't need an alternate state for the find code.....

– Claies
Jan 2 at 4:11

add a comment |

reservedcoders: ReservedCoders;

export class ReservedCoders{

    constructor(

        public coderID:number

    ){ }

}

mycoder is an array

<td>

<div *ngIf="reservedcoders.find(s => s.coderID == mycoder.svUserID); else notEqual">

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Add 10%</button>

</div>

<ng-template #notEqual>

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Add 10%</button>

</ng-template>

</td>

edited Jan 2 at 2:46

Dale Burrell

3,35652655

asked Jan 2 at 2:45

Anusha

what's with the else notEqual in the ngIf here? ngIf already checks for undefined, it doesn't need an alternate state for the find code.....

– Claies
Jan 2 at 4:11

add a comment |

reservedcoders: ReservedCoders;

export class ReservedCoders{

    constructor(

        public coderID:number

    ){ }

}

mycoder is an array

<td>

<div *ngIf="reservedcoders.find(s => s.coderID == mycoder.svUserID); else notEqual">

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Add 10%</button>

</div>

<ng-template #notEqual>

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Add 10%</button>

</ng-template>

</td>

edited Jan 2 at 2:46

Dale Burrell

3,35652655

asked Jan 2 at 2:45

Anusha

reservedcoders: ReservedCoders;

export class ReservedCoders{

    constructor(

        public coderID:number

    ){ }

}

mycoder is an array

<td>

<div *ngIf="reservedcoders.find(s => s.coderID == mycoder.svUserID); else notEqual">

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" class="btn btn-primary">Add 10%</button>

</div>

<ng-template #notEqual>

<button type="button" (click)="releasePopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Release</button>&nbsp;

<button type="button" (click)="addAdditionalPopUp(mycoder.svUserID,mycoder.name)" disabled class="btn btn-primary">Add 10%</button>

</ng-template>

</td>

angular

edited Jan 2 at 2:46

Dale Burrell

3,35652655

asked Jan 2 at 2:45

Anusha

edited Jan 2 at 2:46

Dale Burrell

3,35652655

asked Jan 2 at 2:45

Anusha

edited Jan 2 at 2:46

Dale Burrell

3,35652655

edited Jan 2 at 2:46

Dale Burrell

3,35652655

edited Jan 2 at 2:46

Dale Burrell

3,35652655

asked Jan 2 at 2:45

Anusha

asked Jan 2 at 2:45

Anusha

asked Jan 2 at 2:45

Anusha

what's with the else notEqual in the ngIf here? ngIf already checks for undefined, it doesn't need an alternate state for the find code.....

– Claies
Jan 2 at 4:11

add a comment |

what's with the else notEqual in the ngIf here? ngIf already checks for undefined, it doesn't need an alternate state for the find code.....

– Claies
Jan 2 at 4:11

what's with the else notEqual in the ngIf here? ngIf already checks for undefined, it doesn't need an alternate state for the find code.....

– Claies
Jan 2 at 4:11

add a comment |

1 Answer
1

active

oldest

votes

I'm not sure what the exact problem is, but I have found in the past that somewhat complex expressions do often fail in *ngIf bindings.

The likely best solution is to modify your code to call a simple method in your component, and implement the "find" in that method.

So, for instance, implement this in your component:

public coderIdIsReserved(): boolean {

  return this.reservedcoders.find(s => s.coderID === mycoder.svUserID) ;

}

and change your template to:

<div *ngIf="coderIdIsReserved(); else notEqual">

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000655%2fusing-ngif-in-angular-but-i-am-getting-bindings-cannot-contain-assignments%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I'm not sure what the exact problem is, but I have found in the past that somewhat complex expressions do often fail in *ngIf bindings.

The likely best solution is to modify your code to call a simple method in your component, and implement the "find" in that method.

So, for instance, implement this in your component:

public coderIdIsReserved(): boolean {

  return this.reservedcoders.find(s => s.coderID === mycoder.svUserID) ;

}

and change your template to:

<div *ngIf="coderIdIsReserved(); else notEqual">

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

add a comment |

I'm not sure what the exact problem is, but I have found in the past that somewhat complex expressions do often fail in *ngIf bindings.

The likely best solution is to modify your code to call a simple method in your component, and implement the "find" in that method.

So, for instance, implement this in your component:

public coderIdIsReserved(): boolean {

  return this.reservedcoders.find(s => s.coderID === mycoder.svUserID) ;

}

and change your template to:

<div *ngIf="coderIdIsReserved(); else notEqual">

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

add a comment |

I'm not sure what the exact problem is, but I have found in the past that somewhat complex expressions do often fail in *ngIf bindings.

The likely best solution is to modify your code to call a simple method in your component, and implement the "find" in that method.

So, for instance, implement this in your component:

public coderIdIsReserved(): boolean {

  return this.reservedcoders.find(s => s.coderID === mycoder.svUserID) ;

}

and change your template to:

<div *ngIf="coderIdIsReserved(); else notEqual">

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

I'm not sure what the exact problem is, but I have found in the past that somewhat complex expressions do often fail in *ngIf bindings.

The likely best solution is to modify your code to call a simple method in your component, and implement the "find" in that method.

So, for instance, implement this in your component:

public coderIdIsReserved(): boolean {

  return this.reservedcoders.find(s => s.coderID === mycoder.svUserID) ;

}

and change your template to:

<div *ngIf="coderIdIsReserved(); else notEqual">

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

answered Jan 2 at 4:00

GreyBeardedGeek

21.2k13047

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu