下面是一个基本的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'
  }];
}

发生这种情况的原因是当数组被渲染时它们都有相同的类，为了解决这个问题，你将使用变量id作为触发按钮，在python-django中，你可以通过获取每个列表的唯一编号来解决这个问题
设置id的内容类似于

id ='button-{{forloop.counter}}' , and in javascript it's

for (let i = 0; i < elements.length; i++) {
  elements[i].id = `button-${i}`;}

您也可以在脚本中向其中添加模态函数
基本上就是在Html模板和脚本中设置变量id

内容应该加载到childcomponent中，例如，请参见下面的代码。在该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;
            }
        }
    };