Angularjs - 尝试信任需要字符串的内容中的非字符串值：Context：html - 插入数据时

Posted 2021-04-09

我正在尝试根据DB中可用的ITEMS动态插入html内容，并且需要在点击每个项目的保存按钮时再次保存回DB，该按钮是动态添加的，如下所示。

Controller.js：

 function getItemCommentItems() {
        $http({
            method: 'GET',
            url: 'http://xxx/api/ItemComments/GetItemCommentItems',           
            params: { Area_Id: 'L4' },           
            headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
        }).then(function successCallback(response) {
            //  $scope.itemDtls = [];
            $scope.itemDtls = response.data;
             displayItems($scope.itemDtls);   
        }, function errorCallback(response) { });
    }
 function displayItems(itemData)
    {
        // alert(itemData.length);  Length: 2
        for (i = 0; i <= itemData.length; i++) {
            Title = '<table><tr><td><label for="ITEM_NAME">Item:  </label>{{' & itemData[i].ITEM_NAME & '}}</td></tr ><tr><td><input type="text" id="inpPriority" value="{{ ' & itemData[i].PRIORITY & ' }}" /></td></tr> <tr> <td><input type="text" id="inpComment" value="{{ ' & itemData[i].COMMENT & '}}" /></td></tr><tr> <td><input type="button" ng-click="onSave()" value="Save {{ ' & itemData[i].ITEM_ID & '}}" /></td></tr ></table >';
           // Title = $sce.trustAsHtml(itemData[i]);  ----> Error here Attempted to trust a non-string value in a content requiring a string: Context: html
            $scope.divHtmlVar = $sce.trustAsHtml(Title);  ----> Error here Attempted to trust a non-string value in a content requiring a string: Context: html.   
        }
    }

.HTML：

<tr> <td> <div ng-bind-html="divHtml"></div> </td> </tr>

课程详情：

 public string ITEM_ID { get; set; }
        public string ITEM_NAME { get; set; }
    public string COMMENT { get; set; }
        public string PRIORITY { get; set; }
        public string ITEM_ID { get; set; } 

错误消息：错误：[$ sce：itype]尝试信任需要字符串的内容中的非字符串值：Context：html

有些人可以帮我解决这个问题，还是有更好的方法来完成插入和动态保存的整个方式？

答案

你为什么一开始使用ng-bind-html？如果你在模板中描述了你的元素会好得多。然后你根本不需要使用$sce。我认为这样的事情：

<table ng-repeat="item in itemDtls">
  <tr>
    <td>
      <label for="ITEM_NAME">Item: </label>{{item.ITEM_NAME}}
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="inpPriority" value="{{item.PRIORITY}}" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="inpComment" value="{{item.COMMENT}}" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" ng-click="onSave()" value="Save {{item.ITEM_ID}}" />
    </td>
  </tr>
</table>