Заполнить данные в раскрывающейся строке таблицы щелчка (на основе данных строки таблицы) в угловых - PullRequest
Новая
       31

Заполнить данные в раскрывающейся строке таблицы щелчка (на основе данных строки таблицы) в угловых

0 голосов
/ 16 октября 2019

Как написать функцию, которая берет данные из раскрывающегося списка и заполняет строку таблицы, содержащую этот раскрывающийся список?

HTML: 

<table id="DataTable" border="1" ALIGN="center">
    <tr ALIGN="center">
        <th>name</th>
        <th>add</th>
        <th>number</th>
        <th>type</th>
    </tr>
    <tr class="tcat" *ngFor="let item of Tdata">
        <td class="name">{{item.name}}</td>
        <td class="add">{{item.add}}</td>
        <td class="nyumber">{{item.number}}</td>
        <td class="type" ALIGN="center">
            <select *ngIf="dropData" (click)="jsFunction(item.number);">
                <option>--Select--</option>
                <option *ngFor="let currentData of dropData"> 
                    {{currentData.type}}</option>
            </select>
        </td>
    </tr>
</table>

TS: 

ngOnInit() {
    // called first api and filled the data
    this.Tdata=[
        { name: "xyz"
         add: "abc"
         number: 12345
         type: null },
        { name: "xyz1"
         add: "abc1"
         number: 78900
         type: null },
    ]
}

jsFunction(num){
    // calling the second API here based of the given parameter and that
    // is num.. for example I have clicked the dropdown on the first row
    // which has number=12345 so in dropdown, dropData will fill the
    // value type and that's not happening in my case

    this.dropData=[
        {number: "12345"
        type: "customer"},
        {number: "12345"
        type: "dealer"},
        {number: "12345"
        type: "client"},
        {number: "12345"
        type: "master"},
    ]
}

что должно произойти, это при первом вызове API. Я заполню таблицу примечанием, что тип имеет значение null, и в Html есть раскрывающийся список, поэтому после того, как я нажму на любое раскрывающееся меню, я вызову второй API и пропущу эту нажатую строку. номер в нем и после второго вызова API, который щелкнул раскрывающийся список, должен заполнить данные, которые я получаю в ответ, чтобы я мог выбрать одноразовые эти данные. Я объяснил свою ситуацию. пожалуйста, спросите меня, если вы не получили вопрос. искал в Google, но не смог найти ничего, связанного с этим. должно быть что-то, что я пропустил, или я не знаю об этом большое спасибо.

1 Ответ

0 голосов
/ 16 октября 2019

Попробуйте так:

Шаблон:

Связать (click) событие в tr>: 

<tr class="tcat" *ngFor="let item of Tdata" (click)="jsFunction(item.number);">
</tr>

TS: 

jsFunction(num){
   this.dropData= this.Tdata.filter(x => x.number == num)
}

Рабочая демоверсия

...