Question

我尝试创建表单，以便用户可以自定义创建表单的问题。

Here is a full example，但是当我删除元素时，我遇到了问题，这样它们就不会停留在DROP区域中。

如果我尝试像下面这样在数组中设置表单元素，则它们不会以HTML呈现

formElements = [
        '<mat-form-field class="example-full-width"><input matInput placeholder="Favorite food" value="Sushi/></mat-form-field><br /><mat-form-field>',
        '<mat-label>Select an option</mat-label><mat-select><mat-option>None</mat-option><mat-option value="option1">Option 1</mat-option><mat-option value="option2">Option 2</mat-option><mat-option value="option3">Option 3</mat-option></mat-select></mat-form-field>',
        '<mat-radio-group aria-label="Select an option"><mat-radio-button value="1">Option 1</mat-radio-button><mat-radio-button value="2">Option 2</mat-radio-button></mat-radio-group><mat-slide-toggle>Slide me!</mat-slide-toggle>'
    ];

请查看示例

Answer 1

添加到您的String CSV = "{\"data.airport_name\":\"London Luton Airport\", \"data.city\":London\", \"data.country\":United Kingdom\" } String json = CSV; JsonObject jsonObject = new JsonParser().parse(json).getAsJsonObject(); Assert.assertTrue(jsonObject.isJsonObject()); Assert.assertTrue(jsonObject.get("data.country").getAsString().equals("United Kingdom"));声明<li v-for="user in users" :key="user.id" class="nav-list" @mouseenter="onMouseEnter(user, $event)" @mouseleave="onMouseLeave(user, $event)"> <router-link class="nav-link" :to="nameLowerCase(user.enName)"> <img :src="imgSrc[user.id]"> <p>{{user.enName}}</p> </router-link> </li> data: function(){ return { imgSrc: [], } }, methods: { onMouseEnter(user, event){ this.setImgSrc(user, true); }, onMouseLeave(user, event){ this.setImgSrc(user, false); }, setImgSrc(user, isHover) { const trimmedUrl = user.darkIconImageUrl; const trimmedColorUrl = user.lightIconImageUrl; const trimmedBase = trim(AWS.BASEURL_ORIGINAL, '/'); const trimmedBucket = trim(AWS.BUCKET, '/'); if(isHover) { this.imgSrc[user.id] = `${trimmedBase}/${trimmedBucket}/${trimmedColorUrl}`; } this.imgSrc[user.id] = `${trimmedBase}/${trimmedBucket}/${trimmedUrl}`; }, }中：

cdk-drag-drop-connected-sorting-example.ts

那应该工作。

希望有帮助！

拖放表单元素

1 个答案: