Angular Material根据服务响应动态修改按钮颜色不生效问题

颜色未生效是两个代码错误共同导致的：

• 条件判断逻辑错误：模板中job_status.get(data.id) == 'NEW' || 'START'的写法不符合JS/TS运算规则，||会返回两侧第一个真值，非空字符串'START'恒为真，因此无论任务状态是什么，判断条件永远成立，始终返回primary，永远不会走到warn分支。
• 按钮指令冲突：同一个<button>元素上同时写了mat-button和mat-raised-button两个Angular Material按钮指令，二者的样式、属性绑定逻辑会互相覆盖，直接导致[color]绑定失效。

1. 删除冲突的按钮指令：根据需求保留一个按钮指令即可，需要凸起按钮保留mat-raised-button，需要扁平按钮保留mat-button，不要同时声明。
2. 修正条件判断逻辑：不要用||拼接判断值，改用数组includes方法校验状态，避免逻辑书写错误。

修正后的模板代码：

<div class="button-wrap text-center">               
    <button  
        mat-raised-button
        class="mrgn-b-xs mrgn-r-xs"
        type="button"
        (click)="startPrint(data.id)" 
        [color]="['NEW', 'START'].includes(job_status.get(data.id)) ? 'primary' : 'warn'"
        [disabled]="isDisabled">
        {{job_status.get(data.id) | translate}}                    
    </button> 
    {{job_status.get(data.id)}}        
</div>

优化提示：Angular变更检测运行时，模板中直接调用Map.get()方法会在每次检测周期重复执行，数据量大时会产生额外性能损耗，可在接口返回数据时直接将状态挂载到对应列表项上，减少模板中的方法调用。

修复后即可实现预期效果：状态为NEW/START时按钮显示primary主题色，其余状态显示warn警告色。

内容的提问来源于stack exchange，提问作者ZAJ