Я новичок в Angular. ng --version говорит Angular 8.2.6. Я расширяю чужое приложение.
У меня есть компонент StructureDefinition, который содержит визуальный элемент dagre-d3 и легенду с шестью элементами (по одному для каждого типа продукта).
Когда пользователь щелкает элемент, появляется диалоговое окно (компонент StructureAddProductDialog). Диалог покажет элементы формы, расположенные в трех столбцах.
Я строю первый столбец, компонент StructureDialogColumn1. Он содержит форму и в настоящее время один выбор матов с шестью пунктами выбора матов, соответствующими шести типам продуктов в легенде.
Я пытаюсь установить, какой вариант выбора матов выбирается при открытии диалога. В настоящее время при загрузке ничего не выбирается.
Поле, которое пользователь щелкнул в компоненте StructureDefinition , успешно передается в дочерний компонент StructureAddProductDialog через свойство данных переменной config в диалоговое окно.
import { MatDialog, MatDialogConfig } from '@angular/material';
класс:
export class StructureDefinitionComponent implements OnChanges {
constructor(
private dialog: MatDialog,
private productService: ProductService
) {}
ngOnChanges(changes: SimpleChanges) {
this.renderChart(this.dialog, this.productService);
}
renderChart(dialog, products) {
const element = this.chartContainer.nativeElement;
d3RenderChart(element, dialog, products);
}
}
function d3RenderChart(element, dialog, products) {
...other code here
var productGroup = legendGroup.selectAll("g.products")
.data(products)
.enter().append("g")
.attr("class","products")
.attr("transform",function(d,i){ return "translate(10,"+((i+1)*55)+")"; })
.on('click', function(d){ openDialog(d, dialog); });
...other code here
function openDialog(d, dialog) {
const dialogConfig = new MatDialogConfig();
dialogConfig.data = d;
const dialogRef = dialog.open(StructureAddproductDialogComponent, dialogConfig);
}
Дочерний компонент StructureAddProductDialog получает данные:
@Injectable()
export class StructureAddproductDialogComponent implements OnDestroy {
data: ProductType;
constructor(
private dialogRef: MatDialogRef<StructureAddproductDialogComponent>,
private productService: ProductService,
@Inject(MAT_DIALOG_DATA) data:ProductType
) {
console.log(data);//logs the selected item correctly to console
}
ngOnDestroy(): void {
}
}
Затем я пытаюсь передать выбранные данные последний компонент столбца как selectedTest:
template: `
<div class="container" id="container1">
<h2 mat-dialog-title>Product definition</h2>
<structure-dialog-column1 [productsTest]="productService" [chosenTest]="data"></structure-dialog-column1>
</div>
`
productsTest данные поступают нормально, но selectedTest не определен в StructureDialogColumn1:
export class StructureDialogColumn1Component {
@Input() productsTest: ProductType;
@Input() chosenTest: ProductType;
productForm = this.fb.group({ products: [''] });
constructor(
private fb: FormBuilder,
private chosen: ProductType
) {
console.log(this);//StructureDialogColumn1Component.chosenTest==undefined
}
}
Я собираюсь по кругу, пытаясь заставить это работать. Вы можете помочь?
Спасибо!