Question

是否可以仅在一个<ul> <?php $obj = new Mage_Catalog_Block_Navigation(); $storeCategories = $obj->getStoreCategories(); Mage::registry('current_category') ? $currentCategoryId = Mage::registry('current_category')->getId() : $currentCategoryId=''; foreach ($storeCategories as $_category): ?> <li> <strong><?php echo $_category->getName(); ?></strong> <?php $categoryChildren = $_category->getChildren(); ?> <?php if($categoryChildren->count()) : ?> <ul> <?php foreach($categoryChildren as $_categoryChild) : ?> <?php $_categoryChildModel = Mage::getModel('catalog/category')->load($_categoryChild->getId());?> <?php $categoryGrandchildren=$_categoryChild->getChildren(); ?> <li> <?php $currentCategoryId===$_categoryChild->getId() ? $bold="style=\"font-weight:bold\"" : $bold=''; echo '&emsp;' . '<a href="' . $_categoryChildModel->getUrl() . '"' . $bold . '>' . $_categoryChild->getName() . '(' . $_categoryChildModel->getProductCollection()->count() . ')</a>'; ?> </li> <?php if($categoryGrandchildren->count()) : ?> <?php foreach($categoryGrandchildren as $_categoryGrandchild) : ?> <?php $_categoryGrandchildModel = Mage::getModel('catalog/category')->load($_categoryGrandchild->getId());?> <li> <?php $currentCategoryId===$_categoryChild->getId() ? $bold="style=\"font-weight:bold\"" : $bold=''; echo '&emsp;&emsp;' . '<a href="' . $_categoryGrandchildModel->getUrl() . '"' . $bold . '>' . $_categoryGrandchild->getName() . '(' . $_categoryGrandchildModel->getProductCount() . ')</a>'; ?> </li> <?php endforeach; ?> <?php endif; ?> <?php endforeach; ?> </ul> <?php endif; ?> </li> <?php endforeach ?>中绑定多个字段，或者执行类似的操作以获得相同的结果？我试过了，但是每个选择都会覆盖另一个。

这里有个stackbliz示例： https://stackblitz.com/edit/angular-tjgycw?file=src/app/app.component.html

Answer 1

不可能具有共享模型的表单控件名称。

但是您可以合并这样的控制模型：

TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  acessoForm: FormGroup;
  listaPermissoes: any[];

  constructor(
    private builder: FormBuilder,
  ) {

  }

  ngOnInit() {

    this.listaPermissoes = [
      {
        "id": 2,
        "nome": "grupo.perm.cadeira",
        "permissoes": [
          {
            "id": 6,
            "nome": "perm.cadastrarCadeira"
          },
          {
            "id": 7,
            "nome": "perm.alterarCadeira"
          },
        ]
      },
      {
        "id": 4,
        "nome": "grupo.perm.mesa",
        "permissoes": [
          {
            "id": 15,
            "nome": "perm.cadastrarMesa"
          },
          {
            "id": 16,
            "nome": "perm.alterarMesa"
          },
        ]
      }]

    this.acessoForm = this.builder.group(
      this.listaPermissoes.map((item, index) => `permissoes-${index}`)
        .reduce((pre, curr) => { 
          pre[curr] = [[]]; 
          return pre; }, {}), {});
  }

  selectedPermissoes(){
    return [].concat(...Object.values(this.acessoForm.value));
  }


}

HTML

<form [formGroup]="acessoForm">
    <div *ngFor="let listaPermissao of listaPermissoes; let i = index">
        <div class="col-md-6">
            <p>{{listaPermissao.nome}}</p>
        </div>

        <div class="col-md-6">

            <select class="form-control" [formControlName]="'permissoes-'+i" multiple>
                                      <option *ngFor="let permissao of listaPermissao.permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
                                    </select>
        </div>
    </div>
</form>
<pre>{{selectedPermissoes() | json}}</pre>

Angular：仅一种形式的多个字段ControlName，反应形式

1 个答案: