ngFor下的嵌套ngModel未按预期显示值

时间:2019-04-23 08:42:36

标签: angular angular-ngmodel ngfor

我有一个这样的对象数组,它简化了来自http请求的数据。

displayArgs = [{paramName: 'Nam1', paramValue: ''}, {paramName: 'Nam1', paramType: ''}, {paramName: 'Nam1', paramType: ''}, {paramName: 'Nam1', paramType: ''}]

我正在使用* ngFor显示这些值,我将使用输入字段填充这些paramValues。                      

          <div *ngIf="showParams" class="block-details templateParams">
            <table class="paramTable">
              <thead>
                <tr>
                  <th>paramName</th>
                  <th>paramValue</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td> {{arg.paramName}}</td>
                  <td><textarea formControlname="selectedParamValue" name="param-{{arg.paramName}}" id="param-{{arg.paramName}}" [ngModelOptions]="{standalone: true}"   [(ngModel)]="displayArgs[i].paramValue"></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
           </div>

         </div>
          <div *ngIf="showParams" class="template-strings">
            <h4>Template String</h4>
            <p>you can copy paste the string below into your article template:</p>

            <span #template class="template-string">
                {{template_string}}
              </span>
            <a
            (click)="addTemplateToEditor(template, block)"
            class="c-btn c-btn--info blocks-btn"
          >
            <i class="fa fa-newspaper-o u-mr-xsmall"></i> Use Block
          </a>
          </div>
          <div class="errorMsg" *ngIf="showNoTemplateError">
              <p>No Parameters found for this block.</p>

              <div class="template-strings">
                  <h4>Template String</h4>
                  <p>you can copy paste the string below into your article template:</p>

                  <span #template class="template-string">
                    {{template_string}}
                  </span>
                  <a
                  (click)="addTemplateToEditor(template, block)"
                  class="c-btn c-btn--info blocks-btn"
                >
                  <i class="fa fa-newspaper-o u-mr-xsmall"></i> Use Block
                </a>
                </div>
            </div>
        </div>

我正在尝试将paramValues的值放入字符串中。 这是我要显示的模板字符串。

   this.template_string = `$(kb.template_block('${this.block.data.template_block.name}'))`;
    if(this.displayArgs.length > 0 ){
      this.displayArgs.map(res =>{
      this.template_string =  this.template_string.slice(0, this.template_string.indexOf(')') ) + `, ${res.paramName} = '${res.paramValue}' ))`
      })

问题在于ngModel在控制台中显示了更新的值,但是在字符串中却没有更新。我正在对这样的选择进行值更改时使用模板字符串。

<select (change)="selectedTemplate($event)" formControlName="templateBlock" class="c-select select2-container select2-container--default select2-container--below" id="select1"  required>
                <option *ngFor="let block of blocks;let i = index;" [value]="block.block_id">{{block.name}}</option>
        </select>

0 个答案:

没有答案