Question

我有两个按钮，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 g或outline。如果guestResponse与toggle.response不匹配，我需要在元素中添加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)); } }。现在它没有为任何一个元素添加轮廓。

编辑***响应功能

 MessageQueue.Create

Answer 1

请添加：

this.guestResponse = event;函数内的

response(event: string) { ... }。

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;  
        });
    }
}

Angular 2有条件地向元素添加属性

1 个答案: