分别为 for 循环中的每个项目打开一个模式

Question

我正在显示大约 5 个面板，其中从一个数组呈现，然后显示每个面板都有自己的 ID、名称和要共享的内容。在每个面板中，我都有一个展开图标，我允许用户将选定的面板展开成一个大模式。我正在使用引导程序中的示例，但当前当我单击以模式打开时 - 它以大模式打开，但它为数组中的每个项目打开，而不仅仅是选定的面板。这是我到目前为止所拥有的：

 <div class="col-sm-4" *ngFor="let item of items; let i = index">
         <div class="panel panel-warning">
            <div class="panel-heading">
                {{item.title}}
               <div class="box-header-btns pull-right">
                  <a title="Expand" type="button" data-toggle="modal" data-target=".bs-example-modal-lg">
                      <i class="glyphicon glyphicon-resize-full"></i>
                  </a>
               </div>
             </div>
             <div class="panel-body modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                 <div class="modal-dialog modal-lg" role="document">
                      <div class="modal-content">
                           {{item.content}}
                      </div>
                 </div>
             </div>
         </div>
  </div>

我的数组循环显示面板：

 items: Array<Panel> = [
        new Panel(1, 'panel 1', 'show text', 'test data in modal'),
        new Panel(2, 'panel 2','show image', 'more test data'),
        new Panel(3, 'panel 3', 'show graph', 'more and more data')
    ];

class Panel {
  constructor(
    public id: number, 
    public title: string, 
    public footer: string, 
    public content: any) 
}

目前，当我为一个项目打开一个模式时，它还会在模式关闭之前循环遍历所有其他项目。

Answer 1

这是一个带有工作代码的基本 plunkr（非常丑陋）。 https://plnkr.co/edit/lISLyUaMbc1W28sWRugi?p=info

正如我之前所说，这里的问题是您正在为循环的每次迭代创建一个不同的模式对话框。但是，由于您忘记包含选择项目的函数，因此几乎不可能说出实际错误的原因

@Component({
  selector: 'app',
  template: `

<div class="col-sm-4" *ngFor="let item of items; let i = index">
  <div class="panel panel-warning">
    <div class="panel-heading">
      <div class="box-header-btns pull-right" (click)="selectedItem = item">
        <a title="Expand" type="button" data-toggle="modal" data-target=".bs-example-modal-lg">
          <i class="glyphicon glyphicon-resize-full"></i> {{item.title}}
        </a>
      </div>
    </div>
  </div>
</div>
<div class="panel-body modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      {{selectedItem?.content}}
    </div>
  </div>
</div>
<pre>{{selectedItem && selectItem.content | json}}</pre>
  `
})
export class App {
  items = [{
    id: 1,
    title: 'panel 1',
    footer: 'show text',
    content: 'test data in modal'
  }, {
    id: 2,
    title: 'panel 2',
    footer: 'show image',
    content: 'more test data'
  }, {
    id: 3,
    title: 'panel 3',
    footer: 'show graph',
    content 'more and more data'
  }];
}

Answer 2

内容应该加载到子组件中，例如看下面的代码在那个expandPanel中你可以添加一个参数并尝试使用它

<div class="col-sm-4" *ngFor="let item of items; let i = index">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    {{item.title}}
                    <div class="box-header-btns pull-right">
                        <a title="Expand" (click)="expandPanel(i);" type="button" data-toggle="modal" data-target=".bs-example-modal-lg">
                            <i class="glyphicon glyphicon-resize-full"></i>
                        </a>
                    </div>
                </div>
                <div class="panel-body modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                    <div class="modal-dialog modal-lg" role="document" *ngFor="let children of item.children">
                        <div class="modal-content">
                            {{children.content}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

json文件应该是这样的

this.items= [
            {
                titile: "xxxxx",  children: [
                    { content: 'aaaaa'},
                   { content: 'bbbbbb'},
                  { content: 'cccccc'}
                ]
            },
            {
                title: "zzzzzz", children: [
                    { content: 'gggggg'},
                   { content: 'jjjjjjjjjj'}
                ]
            },
            {
                title: "ddddd", children: [
                    { content: 'ppppp'}
                ]
            }
        ];



 expandPanel(index: number) {
        this.items[index].active = !this.items[index].active;
        this.collapseAnother(index);
    }

collapseAnother(index: number) {
        for (var i = 0; i < this.items.length; i++) {
            if (i != index) {
                this.items[i].active = false;
            }
        }
    };