Question

我正在显示大约5个面板，其中从数组中呈现，然后显示每个面板以及它们自己的id，名称和要共享的内容。在每个面板中，我有一个展开图标，我允许用户将所选面板扩展为大模态。我正在使用bootstrap中的示例，但是当我点击以模态打开时 - 它以大模态打开，但它会打开数组中的每个项目，而不仅仅是选定的面板。以下是我到目前为止的情况：

 <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;
            }
        }
    };

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

2 个答案: