Question

我有一个带有单选按钮的选项列表，单选按钮的选择正在根据需要运行，但是我需要根据无法执行的选择保持div的可见性

     <ul *ngFor="let client of clientList;let index = index">
        <div class="name">
            {{ client.name }}
    
            <svg [ngClass]="{ active: client['id'] === selectedEnvironment['id'] }" width="28px" height="24px"
                viewBox="0 0 1024 1024">
                <path d="M769.6 217.6h-404.8v220.8h414.335l-115.115-110.4z"></path>
                <path d="M880 217.6l-113.377 110.4 113.377 110.4v73.6h-588.8v-368h588.8z"></path>
                <path d="M144 880h73.6v-736h-73.6z"></path>
            </svg>
        </div>
        <li *ngFor="let env of client.environment;let index = index">
          <input [name]="client.id" type="radio" [value]="env.name [ngModel]="selectedEnvironment[env.id]" (ngModelChange)="selectEnv(env,client?.id)">
    {{env.name}}
   <svg [ngClass]="{ active: env === selectedEnvironment['env'] }" width="28px" height="24px" viewBox="0 0 1024 1024">
   <path d="M769.6 217.6h-404.8v220.8h414.335l-115.115-110.4z"></path>
   <path d="M880 217.6l-113.377 110.4 113.377 110.4v73.6h-588.8v-368h588.8z"></path>
    <path d="M144 880h73.6v-736h-73.6z"></path>
            </svg>
        </li>
    </ul>


 

    public clientList = [
        {
          id: '1234',
          name: "LA Care Health Plan",
          representative: {
            name: "Brittany Bennet",
            imageUrl: "../../../../../../assets/images/clients/5.jpg"
          },
          team: [
            {
              name: "Chris",
              imageUrl: "../../../../../../assets/images/clients/1.jpg"
            },
            {
              name: "David",
              imageUrl: "../../../../../../assets/images/clients/2.png"
            },
            {
              name: "Mary",
              imageUrl: "../../../../../../assets/images/clients/3.png"
            },
            {
              name: "John",
              imageUrl: "../../../../../../assets/images/clients/4.jpg"
            }
          ],
          environment: [
            {
              id: '1',
              name: "Staging",
              services: ["File submission", "Bulk update"]
            },
            {
              id: '2',
              name: "Production",
              services: ["Workflow Building", "Workflow Building"]
            },
            {
              id: '3',
              name: "Development",
              services: ["Workflow Building", "Workflow Building"]
            }
          ]
        },
        {
          id: '1235',
          name: "Humana",
          representative: {
            name: "Steve Matthews",
            imageUrl: "../../../../../../assets/images/clients/4.jpg"
          },
          team: [
            {
              name: "Jane",
              imageUrl: "../../../../../../assets/images/clients/5.jpg"
            },
            {
              name: "Sam",
              imageUrl: "../../../../../../assets/images/clients/6.png"
            },
            {
              name: "Stacy",
              imageUrl: "../../../../../../assets/images/clients/7.jpg"
            }
          ],
          environment: [
            {
              id: '4',
              name: "Staging",
              services: ["File submission", "Bulk update"]
            },
            {
              id: '5',
              name: "Production",
              services: ["Workflow Building", "Workflow Building"]
            },
            {
              id: '6',
              name: "Development",
              services: ["Workflow Building", "Workflow Building"]
            }
          ]
        },
        {
          id: '12346',
          name: "BSBC Lousiana",
          representative: {
            name: "Paul Vincent",
            imageUrl: "../../../../../../assets/images/clients/3.png"
          },
          team: [
            {
              name: "Chris",
              imageUrl: "../../../../../../assets/images/clients/8.png"
            },
            {
              name: "David",
              imageUrl: "../../../../../../assets/images/clients/9.jpg"
            }
          ],
          environment: [
            {
              id: '7',
              name: "Staging",
              services: ["File submission", "Bulk update"]
            },
            {
              id: '8',
              name: "Production",
              services: ["Workflow Building", "Workflow Building"]
            },
            {
              id: '9',
              name: "Development",
              services: ["Workflow Building", "Workflow Building"]
            }
          ]
        },
        {
          id: '1237',
          name: "Chicago State Health Dermatology department",
          representative: {
            name: "Amanda Sue",
            imageUrl: "../../../../../../assets/images/clients/2.png"
          },
          team: [
            {
              name: "Stacy",
              imageUrl: "../../../../../../assets/images/clients/10.jpg"
            },
            {
              name: "John",
              imageUrl: "../../../../../../assets/images/clients/11.jpg"
            }
          ],
          environment: [
            {
              id: '10',
              name: "Staging",
              services: ["File submission", "Bulk update"]
            },
            {
              id: '12',
              name: "Production",
              services: ["Workflow Building", "Workflow Building"]
            },
            {
              id: '13',
              name: "Development",
              services: ["Workflow Building", "Workflow Building"]
            }
          ]
        }
      ];
      public selectedEnvironment = {};
    
      public selectEnv(env: any, clientId: number): void {
       this.selectedEnvironment = {
      id: clientId,
      env: env
    };
        console.log(this.selectedEnvironment);
      }

我正在尝试根据选择在svg上设置ngClass，但是我无法执行该操作我该如何实现，必须使用ngModel和ngModelChange

Answer 1

您能尝试一下吗？

HTML

<svg [ngClass]="{ active: client.id === selectedEnvironment.clientId }" width="28px" height="24px" viewBox="0 0 1024 1024">

根据单选按钮检查状态保持div的活动状态

1 个答案: