मैं ngFor का उपयोग कर एक तालिका प्रदर्शित कर रहा हूँ। एक विशेष कॉलम के लिए मेरे पास एक स्ट्रिंग है जिसे दो लाइन के रूप में आने की जरूरत है। मैंने फ़ंक्शन का उपयोग करके स्ट्रिंग को दो सरणी मानों में विभाजित किया है। हालांकि, जब मैं टेम्पलेट में स्वरूपित एचटीएमएल के रूप में मानों को वापस कर रहा हूं, तो यह आवश्यकतानुसार स्वरूपित अभिव्यक्ति के बजाय एचटीएमएल टैग के साथ दिख रहा है।

मेरा .ts फ़ाइल कोड है

    isSplit(index, cdata){
    if(index == 6){
      return `${cdata.split(' ')[0]}<br/>${cdata.split(' ')[1]}' '${cdata.split(' ')[2]}`; 
    }
    else{
     return cdata
    }
  }

मेरा .html फ़ाइल कोड है

<td *ngFor="let hero1 of hero.cell; let i=index"><span>{{isSplit(i,hero1._cdata)}}</span></td>

आउटपुट $15,50<br/>Employee' 'Paid के रूप में आ रहा है

वांछित आउटपुट है

     $15,50
Employee Paid.

जब मैंने नीचे की कोशिश की, तो यह उम्मीद के मुताबिक आ रहा था। मैंने इसे टेम्पलेट के भीतर करने की कोशिश की। हालाँकि, *ngFor के कारण, मैंने अपना दृष्टिकोण बदल दिया है।

{{hero.cell[3]._cdata.split(' ')[0]}}<br/>{{hero.cell[3]._cdata.split(' ')[1]+' '}}{{hero.cell[3]._cdata.split(' ')[2]}}

तो मैं *ngFor का उपयोग करके अपेक्षित परिणाम कैसे प्राप्त कर सकता हूं? कृपया ध्यान दें कि कुछ प्रतिबंधों के कारण मैं सभी स्ट्रिंग्स को विभाजित नहीं कर सकता।

1
Piyali Ghosh 12 अक्टूबर 2020, 16:45

1 उत्तर

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

इसलिए मैंने थोड़ा डेमो बनाया (आपके कोड के आधार पर) और यह उम्मीद के मुताबिक काम कर रहा है:

मेरा परीक्षण डेटा:

 hero = {
  cell: [
   {
    data: "Data Hello Test"
   },
   {
    data: "Data Hello XXX"
   }
  ]
 };

// आपका कार्य (कुछ भी नहीं बदला):

isSplit(index, cdata) {
    if (index == 1) {
      return `${cdata.split(" ")[0]}<br/>${cdata.split(" ")[1]}<br/>${cdata.split(" ")[2]}`;
    } else {
      return cdata;
    }
  }

// HTML कोड:

<table>
    <tr>
        <td *ngFor="let hero1 of hero.cell; let i=index">
            <span [innerHTML]="isSplit(i, hero1.data)"></span>
        </td>
    </tr>
</table>

आउटपुट:

Image of Output view

मुझे आशा है कि आप इसे अभी भी काम कर सकते हैं :-)

0
angularQuestions 13 अक्टूबर 2020, 21:03