如何使用angular2更新已编辑的切换

Question

i have a newsletter subscription, initially it is set according to newsletter i get when the user login.

when i toggle the newsletter thing, it gives me succesfully updated message but the newsletter is still set to false even though i had made it to true. Can anyone help me to sort it out.

HTML:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
        <span style="font-weight: 100;">Newsletter{{company.newsletter|json}}</span>
        <ul class="toggle">
          <li>
            <mat-slide-toggle class="showToggle" name="subscribe" [(ngModel)]="company.newsletter" #slider required (click)="openPopup($event,company)">
            </mat-slide-toggle>
          </li>
        </ul>
      </div>

Ts:

**Checklogin:**
this.ApiService
      .checklogin()
      .subscribe(
        user  => {
          this.company= user.data[0];
        }, error => {
          console.log(error);
        });

**newsletter toggle**
        openPopup(event,company) {
    var userData:any = {
      _id: company._id,
      email: company.email,
      active: company.active,
      newsletter:company.newsletter
    };
      this.ApiService
          .editUserToggle(userData._id,userData)
          .subscribe(
              user => {
                console.log(user);
                this.toasterService.pop('success', 'User subscribed Successfully');
              }, error => {
                if(error.data && error.data.length > 0) {
                  this.toasterService.pop('error', error.data);
                } else {
                  this.toasterService.pop('error', 'Something went wrong!');
            }
         })
  } 

Even after i get success message the newsletter will still be false

Answer 1

You might be getting success message from the update api , but it will be the same value what you send so you will always get false,

try changing the newsletter value,

var userData:any = { newsletter: !company.newsletter };

openPopup(event,company) {
    console.log(company);
    if(!this.loggedIn){
        event.preventDefault();
        this.signIn.show();
    }
    var userData:any = { 
        _id: company._id,
        email: company.email,
        active: company.active,
        newsletter: !company.newsletter
    };
    console.log(userData);
    this.ApiService
    .editUserToggle(userData._id,userData)
    .subscribe(
    user => {
        console.log(user);
        this.toasterService.pop('success', 'User subscribed Successfully');
        this.newsletter = userData.newsletter;
        }, error => {
        if(error.data && error.data.length > 0) {
        this.toasterService.pop('error', error.data);
        } else {
        this.toasterService.pop('error', 'Something went wrong!');
        }
    })
}

But still you didnt change the model value, so what you should do is, after you get the success message, add

this.newsletter = userData.newsletter;

Answer 2

You are calling the service to update the news letter service but you are not toggling the company.newsletter ngModel value. Try wth that

openPopup(event,company) {
var userData:any = {
  _id: company._id,
  email: company.email,
  active: company.active,
  newsletter:company.newsletter
};
  this.ApiService
      .editUserToggle(userData._id,userData)
      .subscribe(
          user => {
            console.log(user);
            this.toasterService.pop('success', 'User subscribed Successfully');
          }, error => {
            if(error.data && error.data.length > 0) {
              this.toasterService.pop('error', error.data);
            } else {
              this.toasterService.pop('error', 'Something went wrong!');
        }
     })

}