我正在开发一个系统，我使用tabset系统在SPA中显示内容。但是在某些页面中，我必须使用ng2-dragula来实现拖放系统，如下面的代码所示。
<div class="row">
<div class="col-4">
<div class="card border">
<div class="card-body">
<h4 class="card-title">BNCC</h4>
<div class="card-text">
<small class="text-muted font-italic font-weight-light">Selecione o ano/faixa, a disciplina e arraste para o mês, ou meses, que deseja aplicar.</small><br>
<label for="exampleInputEmail1" class="mt-2">Ano/faixa</label>
<select class="custom-select" id="exampleInputEmail1">
<option value="1" selected>1º</option>
<option value="2">2º</option>
<option value="3">3º</option>
<option value="4">4º</option>
</select>
<label for="exampleInputEmail1" class="mt-2">Disciplina</label>
<select class="custom-select" id="exampleInputEmail1">
<option value="matematica" selected>Matemática</option>
<option value="portugues">Português</option>
<option value="fisica">Física</option>
<option value="ingles">Inglês</option>
</select>
<table class="table table-hover mt-3">
<tbody [dragula]="'bagtwo'" [dragulaModel]="listaBncc">
<tr *ngFor="let habilidade of listaBncc">
<td style="cursor: move;">{{habilidade.habilidadeDesc}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<div class="card-text">
<table class="table table-hover">
<thead>
<tr>
<th scope="col"><span class="h4">Janeiro</span>
<button class="float-right btn btn-outline-success" placement="left" ngbTooltip="Adicionar item personalizado para este mês"><i aria-hidden="true" class="fa fa-plus"></i></button></th>
</tr>
</thead>
<tbody [dragula]="'bagtwo'" [dragulaModel]="programacaoBnccJan">
<tr *ngFor="let planoJan of programacaoBnccJan">
<td>{{planoJan.habilidadeDesc}}</td>
</tr>
</tbody>
</table>
<table *ngIf="!programacaoBnccJan.length">
<tbody [dragula]="'bagtwo'" [dragulaModel]="programacaoBnccJan">
<tr>
<td class="text-muted font-italic">Você ainda não criou nenhuma pergunta.</td>
</tr>
</tbody>
</table>
（忽略非结束标记，我没有插入它们来优化阅读，但它们存在于代码中）
我遇到的问题是拖动的项目将会隐藏，直到我将鼠标悬停在外部标签上，这让我想到了Dragula不会在同一场景中渲染两次查看，或者至少在它分成两个＆＃34;两个＆＃34;观点。理论上，当我悬停外部标签时，它会呈现当前标签（我拖动了一个项目）。
我尝试设置<ngb-tabset [destroyOnHide]="true">无效。
检查下面的.ts页面。
import { Component,ChangeDetectionStrategy,ViewChild,TemplateRef,OnInit } from '@angular/core';
import { DragulaService, DragulaDirective } from 'ng2-dragula';
import { startOfDay,endOfDay,subDays,addDays,endOfMonth,isSameDay,isSameMonth,addHours } from 'date-fns';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject } from 'rxjs/Subject';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { multi } from '../data';
import { CalendarEvent,CalendarDateFormatter,DAYS_OF_WEEK,CalendarEventAction,CalendarEventTimesChangedEvent } from 'angular-calendar';
import { CustomDateFormatter } from '../custom-date-formatter.provider';
import {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutocompleteComponent} from "ng-auto-complete";
@Component({
selector: 'pedagogica',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './pedagogica.html',
styleUrls: ['./pedagogica.css', '../../node_modules/dragula/dist/dragula.css']
})
export class pedagogica {
single = [{"name": "Pergunta 1","value": 15},{"name": "Pergunta 2","value": 33},{"name": "Pergunta 3","value": 9},{"name": "Pergunta 4","value": 18},{"name": "Pergunta 5","value": 29}];
@ViewChild('modalContent') modalContent: TemplateRef<any>;
multi: any[];
questoesDisp = [
{pergunta: 'O que significa o verbo \'to be\'?', id: '1', materia: 'Inglês', dificuldade: '1º ano'},
{pergunta: 'O que é que cede a energia a uma célula?', id: '2', materia: 'Biologia', dificuldade: '1º ano'},
{pergunta: 'Para que serve a série triboelétrica?', id: '3', materia: 'Física', dificuldade: '3º ano'}
]
questoesSelec = [];
programacaoBnccJan = []; /* questões BNCC para janeiro */
programacaoBnccFev = []; /* questões BNCC para fevereiro */
programacaoBnccMar = []; /* questões BNCC para março */
programacaoBnccAbr = []; /* questões BNCC para abril */
programacaoBnccMai = []; /* questões BNCC para maio */
programacaoBnccJun = []; /* questões BNCC para junho */
programacaoBnccJul = []; /* questões BNCC para julho */
programacaoBnccAgo = []; /* questões BNCC para agosto */
programacaoBnccSet = []; /* questões BNCC para setembro */
programacaoBnccOut = []; /* questões BNCC para outubro */
programacaoBnccNov = []; /* questões BNCC para novembro */
programacaoBnccDez = []; /* questões BNCC para dezembro */
questoesPerson = [{pergunta: 'What are irregular verbs?', id: '1', materia: 'Inglês', dificuldade: '2º ano'}];
historicoDesafios = [{data: '25/04/18', quantidade: '5', turma: 'Turma 101 - 1º ano Fundamental Tarde'}];
listaBncc = [
{"habilidadeDesc": "(EF01MA01) Utilizar números naturais como indicador de quantidade ou de ordem em diferentes situações cotidianas e reconhecer situações em que os números não indicam contagem nem ordem, mas sim código de identificação."},
{"habilidadeDesc": "(EF01MA02) Contar de maneira exata ou aproximada, utilizando diferentes estratégias como o pareamento e outros agrupamentos."},
{"habilidadeDesc": "(EF01MA03) Estimar e comparar quantidades de objetos de dois conjuntos (em torno de 20 elementos), por estimativa e/ou por correspondência (um a um, dois a dois) para indicar “tem mais”, “tem menos” ou “tem a mesma quantidade”."}
];
constructor(private dragulaService: DragulaService, private modalService: NgbModal) {
this.dragulaService.setOptions('bagtwo', {
copy: true
});
}
openSm(content) {
this.modalService.open(content, { size: 'sm' });
}
openLg(content) {
this.modalService.open(content, { size: 'lg' });
}
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
colorScheme = 'fire';
showYAxisLabel = true;
yAxisLabel = 'Population';
// line, area
autoScale = true;
}
任何帮助将不胜感激。谢谢你的时间。
答案 0 :(得分：0)
我已经意识到您必须更新视图才能显示在SPA中完成的多个更新。 ＆＃34;悬停外部标签＆＃34;只有因为我安装了ngb-tooltip才有效，当我将鼠标悬停时会创建一个新div，并在我移出光标后将其销毁。
所以我实现了一个toast组件like this one for Angular 4，它更新了视图，同时提供了有关成功更改的反馈（例如＆＃34;你移动了项目！yay！＆＃34;），所以这是一场胜利/赢。
可能不是最优雅的解决方案，但无论如何它都是一种解决方案。我希望这可以帮助别人。