Question

有一个订阅计划在循环上进行迭代，用户可以在其中添加附加组件。单击附加按钮时，我正在接受用户的输入以添加更多云帐户或增加应用程序的用户。当输入标签遍历数组时，如何从输入标签读取不同计划的值，并且我正在检查条件：如果用户选中了复选框，则他可以编辑输入标签，否则它将被禁用。如果我选中任何复选框，它将影响数组中的所有复选框和输入标签。

我的问题是如何检查复选框的条件并启用输入标签，以及如何读取遍历数组的每个不同计划的值。

HTML代码：

 <div class="content content-full">
   <div class="container-fluid main-panel" [ngClass]="(globals.accountMenuDisplay === 'block')?'':'main_70'">
      <div class='pricing pricing-palden animated fadeIn' style="padding-top: 10px">
          <div *ngFor="let plans of ProductPlanDetailResponse;let i = index" [ngClass]="(i%2==0)?'pricing-item':'pricing-item pricing__item--featured'">
            <div class='pricing-deco' >
            <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
              <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A;   c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path>
              <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A;  c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path>
              <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A;  H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path>
              <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A;   c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
            </svg>
            <div class='pricing-price'><span class='pricing-currency'>$</span>{{plans.recurringPrice}}
              <span class='pricing-period'>/ month</span>
            </div>
            <h3 class='pricing-title'>{{plans.planName}}</h3>
            </div>

            <h4  style="font-size: 2em; color:#00373e; margin-top: -30px; z-index:11" class="pricing-price">Features</h4>
              <ul  style="padding: 10px;list-style: none;">
                <li *ngFor="let features of plans.planDescription;let j = index" style="padding: 5px">
                    {{features}}
                </li>
              </ul>
              <div [ngStyle]="{'display':addAddons}">
                <div >
                  <input type ="checkbox" (change)="enableCloudAccounts()" >
                  <input class="custom-input"  id="cloudAccount{{j}}" type="text" [disabled]="noOfCloudAccount==false ? true : null" placeholder=" # of Cloud Account" style="margin: 5px">
                </div>
                <div >
                    <input type ="checkbox" (change)="enableUsers()" >
                    <input class="custom-input" type="text" [disabled]="noOfUsers==false ? true : null" placeholder=" # of Users" style="margin: 5px">
                  </div>
              </div>
              <button class='pricing-action' (click)="enableAddons()">{{addonText}}</button>
              <button class='pricing-action'>Choose plan</button>

          </div>
          </div>


    </div>

TypScript文件：

      noOfCloudAccount : any;
      noOfUsers : any;
      addAddons: any;
      addonText: any;
ngOnInit() {
    this.noOfCloudAccount= false;
    this.noOfUsers = false;
    this.addAddons = 'none';
    this.addonText = 'Add Addons';
}
enableCloudAccounts(){
  this.noOfCloudAccount = !this.noOfCloudAccount;
}
enableUsers(){
  this.noOfUsers = !this.noOfUsers;
}
enableAddons(){
  this.addAddons = 'block';
}

StackBlitz Link

从输入标签中获取一个在For循环上迭代的输入值

0 个答案: