कोणीय 6 में वस्तुओं की इनलाइन संपादन योग्य सूची

वोट
-1

मैं की एक सूची है Person

class Person {
  name: string;
  birthdate: Date;
}

मैं सफलतापूर्वक इस तरह इस सूची प्रदर्शित:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor=let person of persons>
            <td>{{ person.name }}</td>
            <td>{{ person.birthdate }}</td>
        </tr>
    </tbody>
</table>

अब मैं मैदान बनाने के लिए चाहते हैं nameसंपादन योग्य इनलाइन और क्षेत्र बनाने के लिए birthdatedatepicker पॉपअप के साथ संपादन योग्य।
मैं भी सत्यापन की आवश्यकता होगी और संशोधन के लिए एक वेब API कॉल ट्रिगर किया जाएगा।
सबसे अच्छा तरीका है कि लक्ष्य को प्राप्त करने में क्या है?

19/09/2018 को 13:20
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

आप इस तरह टीडी में पाठ इनपुट या datepicker जोड़ सकते हैं

html फ़ाइल में

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let person of persons">
            <td><input type="text" (input)="onValueChange(person.name)" [(ngModel)]="person.name"/></td>
            <td><input type="date" [(ngModel)]="person.birthdate"/></td>
        </tr>
    </tbody>
</table>

ts

onValueChange(value:any){
  //this api call or whatever you need to do on value change
}

या आप जैसे अन्य कोणीय आधारित घटकों का उपयोग कर सकते primeng या एजी-ग्रिड

19/09/2018 को 13:32
का स्रोत उपयोगकर्ता

वोट
1

तुम एक इस्तेमाल कर सकते हैं एक formArray साथ ReactiveForm और प्रयोग mydatepicker पुस्तकालय datepicker के लिए। दस्तावेजों में अच्छी तरह से वर्णित हैं लेकिन मैं asap जवाब देंगे अगर आप किसी भी सवाल है! यहाँ एक अच्छा ट्यूटोरियल भी है: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

19/09/2018 को 13:30
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more