md-checkbox not triggering change event when inside *ngFor loop with async data
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
md-checkbox should trigger the change event
What is the current behavior?
What are the steps to reproduce?
I’m creating an angular 2 app with redux. I’m stuck with a very bizarre problem that whenever I use static array to iterate over using *ngFor in my component and rendering <md-checkbox> in it. They work fine as expected. But the problem arises when I use observable input in my component and use it in ngFor loop using async pipe as
<li *ngFor="let s of (suggestionsData | async); let i = index;" [ngClass]="{selected: (selectedItemIndex === i)}">
<md-checkbox [checked]="findIfSelected(s)" (change)="chooseSuggestion($event, i)" class="chkbox">{{config ? s[config.text] : s}}</md-checkbox>
</li>
It gets so annoying that I can’t click the <md-checkbox> rendered inside the li’s. The ones outside work fine with static data. Why is it happening I’m really disturbed??
Here’s how I’m inputting the suggestionsData param in my component
export class MultiSelectComponent implements OnInit {
@Input() labelText: string;
@Input('suggestionsData') suggestionsData: Observable<any>;
@Input('selectedItems') selectedItems: Observable<any>;
and this is how I’m extracting it out from the state in another component.
@select(state => state.brand.toJS().brandInfo.brandUsers) brandUsers: Observable<any>;
and passing it in the component as
<app-multi-select labelText="Assigned To" [suggestionsData]="brandUsers" [config]="{text: 'name'}"></app-multi-select>
Please help.
Issue Analytics
- State:
- Created 7 years ago
- Comments:8 (3 by maintainers)
Top GitHub Comments
Figured it out.
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.