角度4 |材料2-按钮切换组的突出显示未通过编程正确更改

我终于弄明白了。

使用一个非常短的setTimeout函数(不是承诺),我能够让它工作。

TS:

@Component({
    selector: 'sort-fields-dialog',
    templateUrl: './sort.fields.dialog.component.html',
    styleUrls: ['./sort.fields.dialog.component.css']
})
export class OrderFieldsDialog {
    fieldsTable: any[];
    buttonToggleValue: number; 
    showButtonToggleGroup: boolean = true;

    constructor(
        public dialogRef: MdDialogRef<OrderFieldsDialog>,
        private snackBar: MdSnackBar
    ) { }

    // fucntion called when selecting a button toggle
    onSelect(index: number): void {
        this.buttonToggleValue = index;
    }

    // function to move a field up 
    moveFieldUp(): void {
        let self = this;
        if (this.buttonToggleValue > 1) {
            this.showButtonToggleGroup = false;
            var temp = this.fieldsTable[this.buttonToggleValue];
            this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue - 1];
            this.fieldsTable[this.buttonToggleValue - 1] = temp;
            this.buttonToggleValue--;
            this.showButtonToggleGroup = true;
            setTimeout(function () {
                // this function removes a bug with highlighting of the button toggles
                // the delay is necessary don't remove
                var temp = "button-toggle-" + (self.buttonToggleValue + 1);
                document.getElementById(temp).setAttribute("class", "toggle-button mat-button-toggle");
            }, 5);
        }
        else {
            this.openSnackBar("You can not move the top item up.");
        }
    }

    // function to move a field down
    moveFieldDown(): void {
        if (this.buttonToggleValue < (this.fieldsTable.length - 1)) {
            this.showButtonToggleGroup = false;
            var temp = this.fieldsTable[this.buttonToggleValue];
            this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue + 1];
            this.fieldsTable[this.buttonToggleValue + 1] = temp;
            this.buttonToggleValue++;
            this.showButtonToggleGroup = true;
        }
        else {
            this.openSnackBar("You can not move the bottom item down.");
        }
    }

    // opens a bottom snackbar
    openSnackBar(message: string) {
        this.snackBar.open(message, "Close", { duration: 975 });
    }
}

<div class="dialog-box" align="center">
    <h1 md-dialog-title>Order Fields</h1>
    <div class="pull-right">
        <md-icon (click)="moveFieldUp()" class="order-button hover-theme-primary">expand_less</md-icon>
        <br />
        <md-icon (click)="moveFieldDown()" class="order-button move-field-down hover-theme-primary">expand_more</md-icon>
    </div>

    <md-button-toggle-group *ngIf="showButtonToggleGroup" [vertical]="true">
        <ng-container *ngFor="let field of fieldsTable; let i = index">
            <md-button-toggle class="toggle-button" id="button-toggle-{{i}}" (click)="onSelect(i)" *ngIf="!field.IsKey" value={{i}}>
                {{field.Name}} 
            </md-button-toggle>
        </ng-container>
    </md-button-toggle-group>

    <md-dialog-actions align="center">
        <button md-raised-button (click)="dialogRef.close('Cancel')">Close</button>
    </md-dialog-actions>
</div>

CSS:

.dialog-box {
    font-family: Roboto, Arial, sans-serif;
    display: inline-block;
}

.toggle-button {
    width: 100%;
    min-width: 300px;
}

.order-button {
    cursor: pointer;
    margin-top: -22%;
    font-size: 175%;
}

.move-field-down {
    margin-top: 25%;
}