Angular 将不同列的每个徽章的颜色更改为不同的颜色

Question

我希望能够用不同的颜色为每个徽章着色，例如红色、绿色、蓝色等。我想指定每一列的颜色。如何更改徽章的背景颜色或徽章文本的颜色？

 .nav-item {

        .nav-link {
            text-decoration: none !important;
            display: flex;
            align-items: center;
            height: 48px;
            padding: 0 24px;
            position: relative;
            overflow: hidden;   //this is the scss code for the nav badge
            cursor: pointer;
            user-select: none;
            color: currentColor;

            > .nav-link-title {
                flex: 1 1 auto;
                white-space: nowrap;
            }
@media  ( min-width: 576px){
       .nav-link-badge  {
                display: absolute !important;
                align-items: center !important;
                width: 35px;
                height: 35px;
                right: unset !important;
                text-align: center !important;
                padding-top: 50px;
                padding-right: 30px;
                padding-bottom: 50px;
                padding-left: 80px;
                font-size: 11px;
                font-weight: 600;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
                margin-left: 8px;
                border-radius: 50%;

                + .collapsable-arrow {
                    margin-left: 8px;
                }
              }
            }

Answer 1

//     var colors = [];
//     colors.currentIndex = -1;
//     colors.getNext = function() {
//         if (this.length > 0) {
//             this.currentIndex += 1;
//             if (this.currentIndex >= this.length) this.currentIndex = 0;
//             return this[this.currentIndex];
//         }

Angular 将不同列的每个徽章的颜色更改为不同的颜色

Angular Change the color of each badge of different column to a different color

html

css

angular

angular-material