मैं आदर्श रूप से एक रूप में उस घटक एकाधिक स्थान का उपयोग करने के लिए अपने आवेदन में घटक के रूप में कोणीय सामग्री का चयन करने का प्रयास कर रहा हूं।

लेकिन मेरा सवाल यह है कि अलग-अलग डेटा के साथ लोड करने के लिए इस चुनिंदा घटक में से प्रत्येक को डेटा कैसे पास किया जाए।

क्या यह किसी भी तरह से मैट-टेबल की तरह है, क्या हम इसके लिए डेटासोर्स का उपयोग करते हैं?

या किसी अन्य तरीके से कृपया मुझे प्रबुद्ध करें।

मेरा स्टैकब्लिज़ कोड देखें;

https://stackblitz.com/edit/angular-hfdyev?file=app%2Fselect-value-binding-example.html

0
Krish 16 अक्टूबर 2018, 16:46

1 उत्तर

सबसे बढ़िया उत्तर

आप प्रपत्र फ़ील्ड के चारों ओर अपना 'रैपर' घटक बना सकते हैं और घटकों का चयन कर सकते हैं और इसे एक 'डेटा स्रोत' इनपुट दे सकते हैं जिसे घटक समझता है। उदाहरण के लिए:

select-field-component.ts

import {Component, Input} from '@angular/core';

@Component({
    selector: 'select-field',
    templateUrl: 'select-field-component.html'
})
export class SelectFieldComponent {
    @Input() datasource: any[];
    @Input() label: string;
    @Input() labelKey: string;
    @Input() value: any;
    @Input() valueKey: string;
}

select-field-component.html

<mat-form-field>
    <mat-label *ngIf="label">{{label}}</mat-label>
    <mat-select [(value)]="value">
        <mat-option *ngFor="let item of datasource" [value]="item[valueKey]">
            {{item[labelKey]}}
        </mat-option>
    </mat-select>
</mat-form-field>

जाहिर है, यह एक सरल उदाहरण है - आप बहुत अधिक सुविधाएँ जोड़ सकते हैं। यहां यह StackBlitz.

0
G. Tranter 16 अक्टूबर 2018, 20:28