角度2の追加属性条件付き

Question

私は2つのボタン、goingとmaybe持っている：私はこのように表示さ

toggles: any[] = [ 
    { response: 'going' }, 
    { response: 'maybe' } 
    ]; 

：

  <ion-col col-12 style="min-height: 250px;"> 
       <img class="event-home-img" src="{{mainEventImage}}" /> 
      </ion-col> 

      <ion-col *ngFor="let toggle of toggles" col-6 style="text-align: center;"> 
       <button (click)="response(toggle.response)" ion-button color="danger" [attr.outline]="guestResponse !== toggle.response ? true : null" 
        full> 
        {{toggle.response}} 
       </button> 
      </ion-col> 

guestResponseをユーザの応答に基づいて戻っgoinグラムまたはmaybeを。 guestResponseがtoggle.responseと一致しない場合は、outlineを要素に追加する必要があります。現在、いずれの要素にもアウトラインが追加されていません。

編集***応答関数

public guestResponse: string; 

ngOnInit() { 
const responses = ['going', 'maybe']; 

    for (const key in responses) { 
     if (responses.hasOwnProperty(key)) { 
     this.db.object(`/events/${this.id}/${responses[key]}/${this.uid}`).valueChanges() 
      .takeUntil(this.ngUnsubscribe) 
      .subscribe((response) => this.getCurrentResponse(response, responses[key])); 
     } 
    } 
} 

    getCurrentResponse(response, key) { 
    if (response) { 
     this.guestResponse = key; 
    } 
    } 

    response(event: string) { 
    console.log(event); 
    if (this.uid) { 
     this.db.object(`/users/${this.uid}`).valueChanges() 
     .takeUntil(this.ngUnsubscribe) 
     .subscribe(user => this.setResponse(user, event)); 
    } 
    } 

Answer 1

追加してください：あなたのresponse(event: string) { ... }関数内

this.guestResponse = event;を。

---

response(event: string) { 
    console.log(event); 

    // add here if you want to show directly on click 
    // this.guestResponse = event; 

    if (this.uid) { 
     this.db.object(`/users/${this.uid}`).valueChanges() 
     .takeUntil(this.ngUnsubscribe) 
     .subscribe(user => { 
      this.setResponse(user, event) 
      // add here if you want after some db operation 
      // this.guestResponse = event; 
     }); 
    } 
}